CSS3动画效果与关键帧使用详解.pptx

css3动画效果讲师：董美琪

animation动画动画关键帧@keyframesanimation动画会按照keyframes关键帧里面指定的帧状态而过渡执行。0%-100%代表动画的时间过渡@keyframesdemoMove{0%{background-color:red;}10%{background-color:green;}20%{background-color:white;}50%{width:200px;}100%{height:200px;}}帧频里面如果只有0%和100%两个关键帧，那么可以用fromto代替

Animation动画animation属性为css3的复合属性，主要包括以下子属性animation-name:此属性为执行动画的keyframe名animation-duration:此属性为动画执行的时间animation-timing-function:指定过渡函数速率ease/ease-in/ease-out/linear/贝塞尔曲线animation-delay:执行延迟时间animation-direction:normal/reverse/alternate/alternate-reverse;animation-iteration-count:infinite/number;