CSS3(3) 애니메이션

2663 단어
현재의 웹 디자인 스타일은 다양해서 개인은 심플한 스타일이나 상호작용성이 강한 것을 비교적 좋아한다.그런 편안한 애니메이션 효과가 있는 응용은 나에게 반나절을 놀게 할 수 있다.오늘 이 편은 CS3의 애니메이션 속성과 기본 응용을 총괄하고 그 다음에 애니메이션 제작 효과가 나타날 것이다.CSS3에서 애니메이션을 만드는 데는 두 가지가 필요합니다. 하나는 @keyframes 규칙이고, 다른 하나는 애니메이션 속성입니다.실례를 쓰지 않았기 때문에 아래에 채소새 강좌 위의 실례를 붙여 참고하도록 하겠습니다. 먼저 코드를 읽지 마십시오.



 
    (runoob.com)




: Internet Explorer 9 IE 。

代码看起来较多,但我们只需要关注@keyframes和animation。@keyframes是用来规定动画,后面跟动画的名称。指定动画过程使用%,或关键字"from"和"to",这是和0%到100%相同,上面的示例是使用了%的方式。animation用来指定动画属性,上面示例中用的是简略写法,每个参数的属性依次是:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

애니메이션의 이름, 애니메이션 완성에 필요한 시간, 애니메이션이 한 주기를 완성하는 속도가 어떠한지 각각 지정한다(이것은 구체적으로 서로 다른 매개 변수가 있기 때문에 참고할 수 있다.http://www.runoob.com/cssref/css3-pr-animation-timing-function.html), 애니메이션 시작 전 지연, 애니메이션 재생 횟수(infinite는 영구 재생), 역재생 여부.마지막 두 개의 매개 변수는 지정하지 않고 기본값을 사용할 수 있으며 구체적인 작용은 참고할 수 있다http://www.runoob.com/cssref/css3-pr-animation.html.

좋은 웹페이지 즐겨찾기