前言:在CSS3中,动画效果有俩种方式:
第一种:transition 属性只能通过指定属性的开始值与结束值,然后在这两个属性值之间进行平滑过渡来实现动画效果,因此只能实现简单的动画效果。transition属性功能是相同的,都是通过改变元素的“属性值”来实现动画效果。
第二种:animation 属性通过定义多个关键帧以及定义每个关键帧(@keyframes)中元素的属性值来实现复杂的动画效果。
过渡
transition
设置元素当过渡效果,可以实现元素不同状态间的平滑过渡,经常用来制作动画效果。
语法:transition: < property > < duration > < timing-function > < delay > ;
参数:
![c34f4d1fb3c74b367152e926bbfda082.png](https://img-blog.csdnimg.cn/img_convert/c34f4d1fb3c74b367152e926bbfda082.png)
transition-property 语法
![36a413533a252cf79f387db744e3cb9e.png](https://img-blog.csdnimg.cn/img_convert/36a413533a252cf79f387db744e3cb9e.png)
transition-durati