CSS3 애니메이션 배우기(애니메이션)

CSS3에는 3D 효과, 애니메이션, 다중 열 등과 같은 많은 고급 기능이 있습니다. 오늘은 CSS3를 사용하여 애니메이션을 작성하는 방법을 기록하는 글을 작성하겠습니다.

먼저, IE9 이하 버전에서는 CSS3 애니메이션을 지원하지 않습니다. (꼭 구현하고 싶다면 js를 사용해도 되지만 효과는 별로 좋지 않습니다.) Chrome과 Safafi는 이전 버전과의 호환성을 위해 접두사 -webkit-을 추가할 것을 권장합니다.

오늘은 간단하게 애니메이션을 만들어 보겠습니다.

먼저 div를 그린 다음 배경 이미지를 추가하세요.

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="demo"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是demo
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.demo</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 100px auto</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(img/demo.jpg) no-repeat</span>;
}

오른쪽과 같이 일반 DIV가 나타납니다.

그럼 움직여 보겠습니다

먼저 이 이미지가 어떻게 움직여야 하는지 설명하는 메서드를 작성하세요

<span style="color: #800000;">@keyframes run_animation</span>{      <span style="color: #ff0000;">
    from {
        transform</span>:<span style="color: #0000ff;"> rotatez(0deg)</span>;
    }<span style="color: #800000;">
    to </span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(360deg)</span>;
    }<span style="color: #800000;">
}</span>

이 animation_run은 이 메소드의 이름입니다. 나중에 이름을 관련 요소에 연결해야 합니다.

from은 애니메이션의 시작 상태를 나타내고, to는 애니메이션의 끝 상태를 나타냅니다.

그래서 이 방법은 요소를 시계 방향으로 360도 회전시키는 방법으로 매우 간단합니다.

from to는 일상적인 개발 요구 사항을 충족할 수 없는 경우가 많기 때문에 이런 작성 방법도 있습니다

@keyframes run_animation{
    0%{<br />　　　　 transform:rotatex(0deg);<br />　　 }
    16%{
        transform: rotatey(-90deg);
    }
    33%{
        transform: rotatey(-90deg) rotatez(135deg);
    }
    50%{
        transform: rotatey(225deg) rotatez(135deg);
    }
    66%{
        transform: rotatey(135deg) rotatex(135deg);
    }
    83%{
        transform: rotatex(135deg);
    }<br />　　100%{<br />　　　　 transform: rotatex(0deg);<br />　　}
}

이 설명을 통해 애니메이션이 더욱 풍부하고 멋진 액션을 연출할 수 있습니다. 각 단계에서 요소의 역학은 백분율로 설명됩니다. 0%는 위에서 언급한 것이고 100%는 ~입니다. 사실 이건 아주 간단하죠~

애니메이션은 쓰기가 너무 쉽습니다. 다음으로 이미지에 애니메이션을 첨부합니다.

<span style="color: #800000;">.demo</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 100px auto</span>;<span style="color: #ff0000;">
    animation</span>:<span style="color: #0000ff;"> run_animation 12s linear infinite</span>; /*关联动画名称，定义动画时长，动画播放速度曲线，播放次数*/<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(img/demo.jpg) no-repeat 100%</span>;
}

이렇게 간단한 코드만으로도 우리가 정의한 방식대로 그림이 움직일 수 있습니다.

　

지금 애니메이션이 움직이지 않는 경우 다음 이유 중 하나일 수 있습니다.

1. 애니메이션 이름이 @keyframes에서 정의한 이름과 일치하지 않습니다.

2. 애니메이션 재생 시간은 정의되지 않습니다. 기본값은 0S이며, 이는 애니메이션이 재생되지 않음을 의미합니다. 위 코드는 12S를 정의합니다.

3. IE9 이하 브라우저에서 이 코드를 실행하세요. IE9 이하는 CSS3 애니메이션을 지원하지 않습니다.

4. 애니메이션 메소드가 잘못 정의되었으며, 메소드 정의의 각 단계에서 스타일이 동일합니다. 아래와 같습니다

<span style="color: #800000;">@keyframes run_animation</span>{<span style="color: #ff0000;">
    0%{
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
    50%</span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
   100%</span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
}</span>

자, 이제 애니메이션이 움직여야 합니다. 애니메이션의 다른 옵션에 대해 이야기해 보겠습니다.

1.animation-iteration-count: 애니메이션이 재생된 횟수입니다. 재생하려는 횟수를 적어주세요. 나는 여기서 무한한 시간을 사용했습니다. 그것은 무한합니다

2.animation-timing-function: 애니메이션 속도 곡선. 이 속도 곡선은 약간 복잡하며 Bessel 함수를 포함합니다. 베지어를 깊이 있게 탐색하고 싶지 않다면 이미 만들어진 선형, 이즈, 이즈인, 이즈아웃, 이즈인아웃을 사용하세요. 베지어를 아시는 분이라면 좀 더 발전된 입방베지어(n,n,n,n)를 사용하실 수 있으며, 가식 분야에서는 강력한 도구라고 생각합니다.

3.animation-delay: 애니메이션을 지연시켜 재생할 수 있으며, 매개변수도 n S입니다. animation-duration과 달리 animation-duration은 애니메이션 재생 기간입니다.

위의 속성은 위의 밤처럼 애니메이션으로 축약될 수 있습니다.

역방향 재생 및 일시 정지 속성에 대해서는 언급하지 않겠습니다. 필요한 경우 http://www.w3school.com.cn/css3/css3_animation.asp 또는

으로 이동하세요.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

아직 궁금한 점이나 제안사항이 있으면 더 많은 소통이 가능합니다. 글의 내용이 제한되어 있고, 내용이 얕다면 끝을 알려주세요~