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

掌握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属性用于定义要应用动画完成所需要的时间，基本语法如下：animation-duration:timeanimation动画animation-timing-function属性animation-timing-function属性的语法格式如下：animation-timing-function:valueanimation动画animation-timing-function属性属性功能说明linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。steps(int,start|end)指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于0）。第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：start：表示直接开始。end：默认值，表示戛然而止。animation动画animation-delay属性其基本语法如下：animation-delay:time;案例如下：animation-delay：3s;-webkit-animation-delay:3s;animation动画animation-iteration-count属性animation-iteration-count:number|infinite;

animation动画animation-direction属性animation-direction属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环，基本语法如下：animation-direction：normal|alternate;animation动画animation-direction案例div{ width:150px; height:150px; background:blue; position:relative; animation-name:demo;/*定义动画名称*/ animation-duration:5s;/*定义动画时间*/ animation-timing-function:linear;/*定义动画速度曲线*/ animation-delay:2s;/*定义动延迟时间*/ animation-iteration-count:5;/*定义动画的播放次数*/ animation-direction:alternate;/*定义动画播放的方向*/}animation动画animation-direction案例@keyframesdemo{ from{left:0px;} to{left:300px;} }transition过渡transition过渡属性值功能描述transition-property指定CSS属性的name，transition效果transition-durationtransition效果需要指定多少秒或毫秒才能完成transition-timing-function指定transition效果的转速曲线transition-delay定义transition效果开始的时候animation-direction属性animation动画transition-property属性—实现过渡效果属性值功能描述none没有属性会获得过渡效果all所有属性将获得过渡效果property定义应用过渡效果的css属性名称，多个名称已英文逗号分隔animation动画CSS3transition-duration属性定义过渡效果的时间，默认值为0，常用单位是秒，其基本语法如下：transition-duration:time;animation动画CSS3transition-timing-function属性 过渡效果以同样的速度从开始到结束：transition-timing-function:linear;-webkit-transition-timing-function:linear;/*SafariandChrome*/animation动画CSS3transition-timing-function属性 #box{ width:300px; height:300px; margin:0auto; background-color:blue; border:5pxsolidred; border-radius:0px; }animation动画CSS3transition-timing-function属性 #box:hover{ border-radius:95px; /*指定动画过渡的CSS属性*/ -webkit-transition-property:border-radius;/*SafariandChrome浏览器兼容代码*/ -moz-transition-propertyborder-radius;/*Firefox浏览器兼容代码*/ -o-transition-property:border-radius;/*Opera浏览器兼容代码*/ /*指定动画过渡的时间*/ -webkit-transition-duration:5s;/*SafariandChrome浏览器兼容代码*/ -moz-transition-duration:5s;/*Firefox浏览器兼容代码*/ -o-transition-duration:5s;/*Opera浏览器兼容代码*/ /*指定动画过以慢速开始和结束的过渡效果*/ -webkit-transition-timing-function:ease-in-out;/*SafariandChrome浏览器兼容代码*/ -moz-transition-timing-function:ease-in-out;/*Firefox浏览器兼容代码*/ -o-transition-timing-function:ease-in-out;/*Opera浏览器兼容代码*