《HTML5+CSS3响应式Web开发》课件——2.css3动画.pptxVIP

掌握animation动画掌握transition过渡

开发任务鼠标点上去实现的详情页效果

animation动画

属性功能说明animation-name指定要绑定到选择器的关键帧的名称animation-duration动画指定需要多少秒或毫秒完成animation-timing-function设置动画将如何完成一个周期animation-delay设置动画在启动前的延迟间隔。animation-iteration-count定义动画的播放次数。animation-direction指定是否应该轮流反向播放动画。animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。animation-play-state指定动画是否正在运行或已暂停动画属性

animation动画@keyframes属性@keyframes属性的语法格式如下:@keyframesanimationname{keyframes-selector{css-styles;}

animation动画animation-name属性为@keyframes动画指定名称animation-name:keyframename|none;语法：

animation动画animation-durationanimation-duration