CSS3中的动画示例

大家好，欢迎来到雄雄的小课堂，上一期我们分享了几个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;
      }

运行效果如图所示：

​编辑