《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 22.过渡和动画

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1过渡属性02定义动画03调用动画目录contentsPART1过渡属性过渡（transition）过渡动画是从一个状态渐渐过渡到另一个状态，可以让页面更好看，更具动感。使用过渡属性的两个条件：（1）元素必须有状态变化。（2）每种状态必须有不同样式。过渡常常和:hover（鼠标经过时）、:focus（获取焦点时）、:active（当前状态）、:target（目标被选中）搭配使用。过渡（transition）过渡属性的书写位置：过渡元素原状态上。语法格式：transition：<transition-property>||<transition-duration>||<transition-timing-function>||<transition-delay>div{width:200px;height:200px;border:1pxsolid#666;transition:all1s;

/*给div加过渡效果，1S完成*/

}div:hover{box-shadow:4px4px6pxrgba(0,0,0,.5);

}过渡（transition）属性描述transition-property过渡属性（默认值为all）transition-duration过渡持续时间（默认值为0s），单位是s秒transition-timing-function过渡运动曲线（默认值为ease函数）transition-delay过渡延迟时间（默认值为0s），单位是s过渡运动曲线属性值描述linear规定以相同速度开始至结束的过渡效果

ease规定慢速开始，然后变快，然后慢速结束的过渡效果ease-in规定以慢速开始的过渡效果

ease-out规定以慢速结束的过渡效果

ease-in-out规定以慢速开始和结束的过渡效果cubic-bezier（n,n,n,n）在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值PART2定义动画动画关键帧动画可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。动画可以实现更多变化更多控制、连续自动播放等效果。@keyframes动画名称{0%{width:100px;}100%{width:200px;}}

定义动画制作动画分为两步：1.先定义动画@keyframes0%是动画的开始100%是动画的完成2.再调用动画（animation）

定义动画动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式、任意多的次数。使用百分比来规定变化的时间，或用关键词“from”和“to”，等同于“0%”“100%”。动画常用属性属性描述@keyframes规定动画animation所有动画属性的简写属性，除了animation-play-state属性animation-name规定@keyframes动画的名称。(必写属性)animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0（必写属性)animation-timing-function规定动画的速度曲线，默认是"ease"animation-delay规定动画何时开始时间，默认是

0animation-iteration-count规定动画被播放的次数，默认是

1，"infinite"无限循环animation-direction规定动画是否在下一周期反向播放，默认是"normal"，"alternate"逆播放animation-fill-mode规定动画结束后停留状态，默认“backwards”回到起始状态，forwards停留结束状态animation-play-state规定动画是否正在运行或暂停。默认是"running","paused"暂停PART3调用动画调用动画div{width:200px;height:200px;background-color:aqua;margin:100pxauto;animation-name:动画名称；/*调用动画*/animation-duration:执行一次动画时间；/*执行一次动画时间*/}动画属性连写animation:name

durationtiming-functiondelay

iteration-countdirection

fill-mode;animation:动画名称

持续时间运动曲线

何时开始

播放次数是否反向动画起始/结束状态；简写属性里面不包含animation-play-state暂停动画:animation-play-state:paused;经常和鼠标经过等其他配合使用要动画来回执行，而不是每次都从起始状态开始:animation-direction:alternate；盒子动画结束后，停在结束位置:animation-fill-mode:forwards；调用多个动画名称要用英文的逗号隔开。如：animation：bear1ssteps（8）infinite，move15sforwards；/*多动画调用，用逗号隔开animation:move2slinear1sinfinitealternate;动画速度曲线值描述linear动画从头到尾的速度是相同的。匀速ease默认。动画以低速开始，在结束前变慢ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束steps()指定了时间函数中的间隔数量（步长）值为正整数任务实践任务1转呼啦圈的机器人（1）创建站点文件夹，新建文件1001.html。（2）根据给定图片素材，新建一个125*132的盒子。（3）给盒子添加背景，并添加动画，设置动画步长值为10，相当于将图片分成十步，每次走一步。步长动画案例@keyframesbear{

/*奔跑动作动画*/0%{background-position:00;}100%{background-position:-1600px0;}}

@keyframesmove{

/*小熊位移动画*/0%{left:0;}100%{