动画名称 animation-name : (动画名称必须与@keyfarmes的名称相对应,因为动画名称是由@keyfarmes定义的) 例如:animation-name:AA;则 @keyfarmes AA 也为该名称。
关键帧 @keyfarmes : 关键帧则是给动画 (从from开始 到 to结束) 的一些效果。 例如:@-webkit-keyfarmes AA{0%{margin-left:0px; radius:0px; height:0px;} 100%{margin-left:300px; radius:50%; height:200px;} 这里加上-webkit则开始到结束就要换成百分比0%到100%,直接使用@keyfarmes就要使用from到to。
动画时间 animation-duration :动画发生到结束的时间 例如: .div{ animation-duration:1s;}
动画的过渡速度 animation-timing-function : 动画运作的快慢方式 有以下5种:linear从开始到结束速度都是一样的,ease开始低速然后加快结束低速,ease-in开始时是低速,ease-out结束时是低速,ease-in-out开始和结束时是低速。 例如:.div{animation-timing-function:ease-in;}。
动画延迟时间 animation-delay : 延缓动画开始的时间 例如: .div{animation-delay:2s;} 这则是两秒之后开始。
动画执行次数 animation-iteration-count : 动画重复开始的次数 infinite表示无数次 例如: .div{animation-iteration-count:2;}这则表示重复两次。
动画顺序 animation-direction :动画运作时的正反顺序 有以下4种:normal 正常方向,reverse 反方向,alternate先正再反 并持续交替,alternate-reverse 先反再正 并持续交替。 例如: .div{animation-direction:alternate;}
动画的状态 animation-liay-state : 动画运行是的状态 有以下两种:running 运动,paused 暂停 这个适用于hover这个选择符。 例如:.div:hover{animation-play-state:paused;} 鼠标指向时就暂停。
动画时间之外的状态 animation-fill-mode :(不能设置动画执行次数为无数次,则该样式不会出现效果)动画结束后的状态 有以下4种 :none 无,forward 动画结束(to里面的所有样式)时的状态,backward 动画开始(from里面的所有样式)时的状态,both 动画开始或者结束时的状态。 例如 .div{anination-fill-state:forward;}
动画复合属性 animation : 复合属性可以把动画的属性都综合在animation里 例如: .div{animation: AA 1s 1s 2 alternate backward;} 这样比较便捷。