CSS3过渡 tansition属性以及总结

过渡 （transition）

一、为什么用过渡？

• 1、   CSS3中，为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
• 2、   CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。

• 3、   CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容：

  • （1）指定要添加效果的CSS属性

  • （2）指定效果的持续时间。

二、过渡有哪些属性： 

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"
transition-delay	规定过渡效果何时开始。默认是 0。

1.transition

          过渡动画transition可以组合简写

                      div.box{ transition:all 0.5s ease-in 0.18s; }

         它的语法顺序是    

                     { transition:property duration timing-function delay; }

2.transition-property

         transition-property:过渡的 CSS 属性的名称

         transition-property:all;表示要过渡的所有属性；

3.transition-duration

        transition-duration：Xs；X表示任意数

4.transition-timing-function

         ease: 由快到慢

         linear: 恒速

         ease-in: 速度越来越快

         ease-out: 越来越慢

         ease-in-out: 先快再慢

   cubic-bezier(.17,.67,.83,.67):过渡中自定义属性自动控制过程中每个阶段的快慢

   来自：http://cubic-bezier.com

5.transition-delay

        transition-delay：过渡延迟时间；如果为负值则直接跳过过渡的      负的延迟的时间过渡效果接着过渡（接下来代码都会有体现）；

 

 

整合过得代码：