使用Css3中transition实现过渡动画的效果:

语法

transition: property duration timing-function delay;

参数详解:
property:需要过渡的属性,如果是全部则为all;

duration:过渡的时间取值,多少时间完成整个过渡效果

transition-timing-function:过渡效果的速度控制;
取值:
linear(匀速)
ease(先慢后快再慢)
ease-in (慢速开始)
ease-out(慢速结束)
ease-in-out(慢速开始和结束)

delay : 延迟效果,延迟多久开始动画

transition可操作实现各种各样的动画效果
它只是一个过渡效果,和animation(动画)是有区别的,animation可通过@keyframe控制区间的效果,transition则只能设置一次.

优点

在CSS3未出现之前,很多过渡和动画效果的操作实现尤为复杂,transition出现后让这些弊端都统统抹杀掉,它可以实现很多的动画过渡效果,让页面多元化,也可以避免写js来显示出动画,常与transform搭配使用达到一些以前需要用js来实现的功能.