집 > 기사 > 웹 프론트엔드 > CSS3 애니메이션 배우기(애니메이션)

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

高洛峰원래의: 2016-10-09 16:12:561133검색

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

먼저 아쉬운 점을 말씀드리자면, IE9 이하 버전은 CSS3 애니메이션을 지원하지 않습니다. (꼭 구현하고 싶다면 js를 사용하는 것도 고려해 볼 수 있지만 효과는 별로 좋지 않습니다.) Chrome과 Safafi는 이전 버전과의 호환성을 위해 접두사 -webkit-을 추가할 것을 권장합니다.

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

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

<body>
    <div class="demo">
        我是demo    </div></body>

.demo{
    width: 120px;
    height: 120px;
    margin: 100px auto;
    background: url(img/demo.jpg) no-repeat;
}

오른쪽과 같이 일반 DIV가 나타납니다. CSS3 애니메이션 배우기(애니메이션)

그런 다음 이동하게 합니다.

먼저 메소드를 작성하고, 이 메소드를 설명합니다. 이 그림이 어떻게 움직여야 하는지

@keyframes run_animation{      
    from {
        transform: rotatez(0deg);
    }
    to {
        transform: rotatez(360deg);
    }
}

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

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

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

from에서 종종 우리의 일상적인 개발 요구를 충족할 수 없기 때문에 이런 작성 방법도 있습니다

@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%는 ~입니다. 사실 이건 아주 간단하죠~

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

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

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

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

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

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

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

4. 메소드 정의 스타일은 모두 동일합니다. 다음과 같습니다

@keyframes run_animation{
    0%{
        transform: rotatez(90deg);
    }
    50%{
        transform: rotatez(90deg);
    }
   100%{
        transform: rotatez(90deg);
    }
}

그런데 이때 애니메이션이 움직여야 합니다. 다음으로 애니메이션의 다른 옵션에 대해 이야기하겠습니다.

1. animation-iteration-count: 애니메이션이 재생되는 횟수, 재생하려는 횟수를 적어주세요. 여기서 제가 무한히 사용한 것은 무한

2. 애니메이션 타이밍 기능: 애니메이션 속도 곡선. 이 속도 곡선은 약간 복잡하며 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_animation

성명：

이전 기사：CSS 플로트다음 기사：CSS 플로트

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

관련 기사