집 > 기사 > 웹 프론트엔드 > CSS3 애니메이션이 "..." 로딩 애니메이션 효과를 구현하는 방법 정보(1)

CSS3 애니메이션이 "..." 로딩 애니메이션 효과를 구현하는 방법 정보(1)

黄舟원래의: 2017-05-26 13:15:491711검색

그림과 같은 로딩 효과 달성:
CSS3 애니메이션이

1: CSS3 애니메이션 구현 코드

html 코드:

提交订单中<span class="ani_dot">...</span>

css 코드:

.ani_dot {
    font-family: simsun;    
}
:root .ani_dot { /* 这里使用Hack是因为IE6~IE8浏览器下， vertical-align解析不规范，值为bottom或其他会改变按钮的实际高度*/
    display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
}
@-webkit-keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    -webkit-animation: dot 3s infinite step-start;
}

@keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}
.ani_dot {
    animation: dot 3s infinite step-start;
}

사진에 표시된 결과는 다음과 같습니다.
참고:

1 IE10+ 및 기타 브라우저에서는 도트 애니메이션이 사라지지만 IE6~IE9는 일반 도트 애니메이션입니다. 텍스트.
2. 애니메이션 애니메이션은 연속적이지만 여기서는 프레임별로, 카드별로 수행합니다. 효과가 그리 연속적이지 않으므로 step-start을 사용하세요.
3. 위 코드도 CSS3 선택기:root를 사용합니다. :root는 IE9+ 및 기타 최신 브라우저에 대한 해킹입니다. IE6-7 및 심지어 IE8에서도 인라인 블록 수평 요소의 수직 정렬:하단 해상도는 인라인 수평 요소의 해상도와 다르기 때문에 높이가 확장됩니다. display: inline- 블록을 해킹해야 합니다.

2: 애니메이션 매개변수에 대한 자세한 설명

위에서는 애니메이션 애니메이션을 사용하였으므로 이 애니메이션의 매개변수에 대해 자세히 소개합니다.

소개

CSS 애니메이션(애니메이션)은 단순히 고정된 애니메이션 시간 내에 특정 빈도 내에서 CSS 값 중 하나 또는 일부를 비밀리에 변경하여 시각적 변형을 달성하는 것입니다. 애니메이션 실행 시간, 시작 값 및 종료 값은 물론 애니메이션 일시 중지 및 시작 시간 지연 등을 포함하여 애니메이션의 다양한 측면을 제어할 수 있습니다.

구문

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
<&#39; animation-name &#39;>：检索或设置对象所应用的动画名称<&#39; animation-duration &#39;>：检索或设置对象动画的持续时间<&#39; animation-timing-function &#39;>：检索或设置对象动画的过渡类型<&#39; animation-delay &#39;>：检索或设置对象动画延迟的时间<&#39; animation-iteration-count &#39;>：检索或设置对象动画的循环次数<&#39; animation-direction &#39;>：检索或设置对象动画在循环中是否反向运动<&#39; animation-fill-mode &#39;>：检索或设置对象动画时间之外的状态<&#39; animation-play-state &#39;>：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

animation

animation-play-state 속성을 제외한 모든 애니메이션 속성의 약식 속성입니다.

animation-name

@keyframes 애니메이션의 이름을 지정합니다. 애니메이션 이름 뒤에 @keyframes가 붙습니다. 이 문서에서는 이 데모를 "점"을 의미하는 도트라고 합니다.

animation-duration

애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0입니다.

애니메이션 타이밍 기능

애니메이션의 속도 곡선을 지정합니다. 기본값은 "쉽게"입니다.

일반적인 애니메이션 속도 매개변수:

선형: 선형 전환. 베지어 곡선과 동일(0.0, 0.0, 1.0, 1.0)
용이성: 부드러운 전환. 베지어 곡선과 동일(0.25, 0.1, 0.25, 1.0)
ease-in: 느린 속도에서 빠른 속도로. 베지어 곡선과 동일(0.42, 0, 1.0, 1.0)
ease-out: 빠른 것에서 느린 것까지. 베지어 곡선(0, 0, 0.58, 1.0)
ease-in-out: 느린 것에서 빠른 것, 그리고 느린 것. 베지어 곡선과 동일(0.42, 0, 0.58, 1.0)
step-start: steps(1, start)와 동일
step -end: steps(1, end)
steps(979e7f42ea08258251c39ffe96b911f2[, [ start | end ]
]?)와 동일: 두 개의 매개변수 step 함수를 허용합니다. 첫 번째 매개변수는 함수의 단계 수를 지정하는 양의 정수여야 합니다. 두 번째 매개변수의 값은 start 또는 end일 수 있으며 각 단계의 값이 변경되는 시점을 지정합니다. 두 번째 매개변수는 선택사항이며 기본값은 end입니다.
cubic-bezier(, , ,

): 특정 베지어 곡선 유형, 4 값은 다음과 같아야 합니다. [0, 1] 범위에서

animation-delay

는 애니메이션이 시작되는 시기를 지정합니다. 기본값은 0입니다. 즉, 애니메이션 지연 실행 시간을 의미합니다.

animation-iteration-count

infinite애니메이션이 재생되는 횟수를 지정합니다. 기본값은 1입니다. 물론 2번, 3번 등으로 설정할 수도 있습니다. 무선 루프 키워드

도 있는데, 이는 애니메이션이 루프로 반복 재생된다는 의미입니다.

animation-direction

다음 주기에서 애니메이션을 역방향으로 재생할지 여부를 지정합니다. 기본값은 "정상"입니다. 물론 다음과 같은 값도 있습니다.

reverse
: 역방향으로 실행
alternate
: 애니메이션이 실행됩니다. 일반적으로 먼저 역방향으로 실행한 다음 계속 교대로 실행
alternate-reverse
: 애니메이션이 먼저 역방향으로 실행된 다음 정방향으로 실행되고 계속 실행됩니다. run 교대로

animation-fill-mode

애니메이션 시간 이외의 개체 상태를 지정합니다.

none
: 기본값입니다. 애니메이션 외부의 객체 상태를 설정하지 마세요
forwards
: 객체의 상태를 애니메이션이 끝난 상태로 설정
backwards
: Set 객체 상태는 애니메이션 시작 부분의 상태
both
: 객체 상태를 애니메이션의 끝이나 시작 부분의 상태로 설정 애니메이션이 시작되기 전에는 "from" 또는 "0%" 키프레임 상태이고, 애니메이션이 완료된 후에는 "to" 또는 "100%" 키프레임 상태입니다.

animation-play-state

"running"애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. 기본값은 paused입니다.

라는 값도 있습니다: 일시 중지.

三：animation动画实例

实例一使用`from to`：

p{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    -moz-animation:mymove 5s infinite; /*Firefox*/
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove{
    from {left:0px;}
    to {left:200px;}
}
@-moz-keyframes mymove { /*Firefox*/
    from {left:0px;}
    to {left:200px;}
}
@-webkit-keyframes mymove{ /*Safari and Chrome*/
    from {left:0px;}
    to {left:200px;}
}

实例二使用百分比：

@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst{ /* Firefox */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst{ /* Safari 和 Chrome */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst {/* Opera */
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

实例三,利用js+Transform和Animation实现3D动画

只有webkit内核的浏览器才能看到相关3D动画效果。
实现效果如图所示：
CSS3 애니메이션이

css代码：

body {
        font-family: &#39;Lucida Grande&#39;, Verdana, Arial;
        font-size: 12px;
      }

      #stage {
        margin: 150px auto;
        width: 600px;
        height: 400px;
        -webkit-perspective: 800;
      }

      #rotate {
        margin: 0 auto;
        width: 600px;
        height: 400px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-name: x-spin;
        -webkit-animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }

      .ring {
        margin: 0 auto;
        height: 110px;
        width: 600px;
        -webkit-transform-style: preserve-3d;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
      }
      
      .ring > :nth-child(odd) {
        background-color: #995C7F;
      }

      .ring > :nth-child(even) {
        background-color: #835A99;
      }

      .poster {
        position: absolute;
        left: 250px;
        width: 100px;
        height: 100px;
        opacity: 0.7;
        color: rgba(0,0,0,0.9);
        -webkit-border-radius: 10px;
      }
      
      .poster > p {
        font-family: &#39;Georgia&#39;, serif;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        margin-top: 28px;
      }

      #ring-1 {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 5s;
      }

      #ring-2 {
        -webkit-animation-name: back-y-spin;
        -webkit-animation-duration: 4s;
      }

      #ring-3 {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 3s;
      }

      @-webkit-keyframes x-spin {
        0%    { -webkit-transform: rotateX(0deg); }
        50%   { -webkit-transform: rotateX(180deg); }
        100%  { -webkit-transform: rotateX(360deg); }
      }

      @-webkit-keyframes y-spin {
        0%    { -webkit-transform: rotateY(0deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(360deg); }
      }

      @-webkit-keyframes back-y-spin {
        0%    { -webkit-transform: rotateY(360deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(0deg); }
      }

html代码：

<p id="stage">
  <p id="rotate">
    <p id="ring-1" class="ring"></p>
    <p id="ring-2" class="ring"></p>
    <p id="ring-3" class="ring"></p>
  </p>
</p>

js代码：

const POSTERS_PER_ROW = 12;
const RING_RADIUS = 200;

function setup_posters (row){
    var posterAngle = 360 / POSTERS_PER_ROW;
    for (var i = 0; i < POSTERS_PER_ROW; i ++) {
      var poster = document.createElement(&#39;p&#39;);
      poster.className = &#39;poster&#39;;
      
      var transform = &#39;rotateY(&#39; + (posterAngle * i) + &#39;deg) translateZ(&#39; + RING_RADIUS + &#39;px)&#39;;
      poster.style.webkitTransform = transform;
      
      var content = poster.appendChild(document.createElement(&#39;p&#39;));
      content.textContent = i;
      row.appendChild(poster);
    }
}

function init (){
    setup_posters(document.getElementById(&#39;ring-1&#39;));
    setup_posters(document.getElementById(&#39;ring-2&#39;));
    setup_posters(document.getElementById(&#39;ring-3&#39;));
}

window.addEventListener(&#39;load&#39;, init, false);

위 내용은 CSS3 애니메이션이 "..." 로딩 애니메이션 효과를 구현하는 방법 정보(1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：순수 CSS를 사용하여 적응형 사각형을 구현하는 사례에 대한 자세한 소개다음 기사：순수 CSS를 사용하여 적응형 사각형을 구현하는 사례에 대한 자세한 소개