css 过渡动画 属性

html-css022

css 过渡动画 属性,第1张

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

transition-delay                设置过渡延迟时间

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

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

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

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

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

opacity                                设置元素的透明度

@keyframes                        设置关键帧动画

animation                            设置动画属性

| 值 | 描述 |

| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |

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

| animation-timing-function | 规定动画的速度曲线。 |

| animation-delay | 规定在动画开始之前的延迟。 |

| animation-iteration-count | 规定动画应该播放的次数。 |

| animation-direction | 规定是否应该轮流反向播放动画。 |

animation-fill-mode : none | forwards | backwards | both

/*none:不改变默认行为。

forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

both:向前和向后填充模式都被应用。 */

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform-origin: bottom right/* 设置旋转点,默认是中心点 */

参考

一、设置css动画

1.使用@keyframes设置关键帧:@keyframes donghua{

0%{

top:100px

left:100px

}

100%{

top:400px

left:800px

}

}

2.使用animation把他绑定在一个选择器上,名称是donghua,播放时间是5s,使用的函数是linear匀速,延迟时间0.5s:

div{animation: donghua 5s linear .5s

  }

二、设置过渡属性

transition: transform 2s ease-in-out 0s

设置transform完成时间为2s,函数为慢进慢出,延迟时间为0s