CSS3 动画transition属性

最新推荐文章于 2024-08-02 20:11:41 发布

weixin_44349413

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量159

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/weixin_44349413/article/details/104738191

版权

CSS3动画
在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

CSS3 中有三个关于动画的样式属性transition、transform和animation；

今天我们先介绍transition这个属性

过渡属性 transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
过渡属性需要触发事件，如：hover（鼠标划过事件）

transition-property：检索或设置对象中的参与过渡的属性
说明：属性值可以单独设置单个属性，也可以设置多个属性 width，height；还可以设置为all（默认值）代表所有属性

div{
	transition-property:width;/*此处的width可以换成其他属性*/
}

div{
	transition-duration: 5s;/*过渡持续时间为5s*/
}

transition-delay：检索或设置对象延迟过渡的时间
说明：设置延迟过度时间（s, ms）属性值为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果；

div{
	transition-delay: 2s;/*在过渡效果开始前等待2秒*/
}

transition-timing-function：检索或设置对象中过渡的动画类型
说明：
linear 匀速
ease（默认值）逐渐慢下来
ease-in加速
ease-out减速
ease-in-out先加速后减速
值还可以写贝塞尔曲线
贝塞尔曲线网址：http://cubic-bezier.com/

div{
	transition-timing-function: linear;/*使动画匀速运作*/
}

transition复合式写法：
transition:all 2s 1s linear ;
（all为transition-property属性值、2s为transition-duration属性值、1s为transition-delay属性值、linear为transition-timing-function属性值）
transition: 2s linear 1s all ;
说明：当使用复合式写法的时候，过度时间和延迟时间的顺序是不能互换的，第一个值代表过度时间，第二个值代表延迟时间；

以上仅为个人观点，若有错误，可私信本人指出，不喜勿喷，谢谢！

关注