css 过渡动画 属性

html-css031

css 过渡动画 属性,第1张

transition-property            过渡效果的CSS属性名称

transition-delay                设置过渡延迟时间

transition-duration            设置完成过渡效果需要花费的时间

transition-timing-function    设置过渡效果的速度曲线

transition                            设置过渡属性的复合写法

transform-origin                设置旋转元素的基点位置(不常用,了解即可)

transform-style                  让转换的子元素保留3D转换(不常用,了解即可)

opacity                                设置元素的透明度

@keyframes                        设置关键帧动画

animation                            设置动画属性

1、@keyframes规则。from{属性:值}  to{属性:值}。

2、0%{属性:值} 100%{属性:值}0% 是动画的开始,100% 是动画的完成。可以在二者之间加入25%,50%等。

3、将动画绑定到选择器:在样式中,设置动画属性animation,自定义动画名称和时长。

4、规定动画开始时的等待时间:animation-delay:时间;可以为秒、毫秒2s,2ms。

5、播放次数:animation-iteration-count:次数;永久播放的值取infinite。

6、动画速度曲线:animation-timing-function:变化类型;变化类型有:linear 匀速;ease-in 开始慢;ease-out 结束慢;ease 动画有一个缓慢的开始,然后快,结束慢。

扩展资料

animation 属性是一个简写属性,用于设置六个动画属性:

1、animation-name

规定需要绑定到选择器的 keyframe 名称。

2、animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

3、animation-timing-function

规定动画的速度曲线。

4、animation-delay

规定在动画开始之前的延迟。

5、animation-iteration-count

规定动画应该播放的次数。

6、animation-direction

规定是否应该轮流反向播放动画。

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。