任务4.4使用CSS制作动画.pptxVIP

任务4.4使用CSS制作动画;任务介绍;任务分析;1;过渡属性：transitions;transitions功能介绍;transition-property

s;transition-duration;;;transition-delay属性;transition属性;;Transform简介;;;移动方法translate（）;缩放方法scale（）;angle指元素旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，负值时，按照逆时针旋转。这里的angle是有单位的，这个单位就是deg。;倾斜skew（）;更改变换的中心点;值;认识三维空间;

语法：perspective：number|none;

语法：transform-style:flat|preserve-3d;;;@keyframes规则是创建动画;案例：文字移动

@keyframesmymove{

0%{transform:translateX(-100%)scale(.5);}

80%{transform:translateX(0px)scale(.5);}

90%{transform:translateX(0px)scale(1.5);}

100%{transform:none;}

}

@keyframesmymove1{

from{margin-left:-100%;}

to{margin-left:30%;}

};动画属性;Animation动画;Animation动画;animation-iteration-count属性定义动画的播放次数;animation-direction属性定义是否应该轮流反向播放动画。

如果animation-direction值是alternate，则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。;animation-play-state属性定义动画的状态。;animation-fill-mode属性定义动画结束后的状态，;综合属性---animation