大家好，欢迎来到雄雄的小课堂，上一期我们分享了几个CSS变形案例，大家还记得有哪几个吗？原文在这里：CSS3的几个变形案例……
今天，我们来看看CSS的过渡：
过渡
简单的来讲，就是元素由一种状态（样式）转变到另一种时的过程，可以称之为过渡。我们来口头举个例子：
某div初始的宽和高均为200px,背景色为红色（red）,当鼠标悬浮时，我们想让其原地转一圈，背景色为黄色(yellow),那么由红色转到黄色的这个过程，即过渡……
语法：
transition: transition-property transition-duration transition-timing-function transition-delay;
大部分人一看这个语法，心理难免咯噔一下，我去，这么多啊……
其实不然，我们将其属性和挨个分析一下：
transition-property：规定应用过渡的 CSS 属性的名称；值可以width,height,background-color等，也可以是all,一般为了方便都写all。
transition-duration：定义过渡效果花费的时间；值可以是1s,2s等。秒数越大，动画执行的越慢。
transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。其余的值还有: linear （匀速执行），ease（规定慢速开始，然后变快，然后慢速结束），ease-in（规定以慢速开始的过渡效果），ease-out（规定以慢速结束的过渡效果），ease-in-out（规定以慢速开始和结束的过渡效果）
transition-delay：规定过渡效果何时开始。默认是 0。也可以是具体的秒数，1s,2s等。
最后使用代码举个例子吧：
有如下div元素：
<div id="div6">
6
</div>css样式为：
#div6{
transition: all 1s ease-in-out;
}
#div6:hover{
transform: translate(10px,10px) rotate(360deg);
background:beige;
}运行效果如图所示：
往期精彩
点分享
点点赞
点在看