过渡课堂笔记

标签：

过渡

一，什么是过渡（transition）？

    1，transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。

    2，可以在不使用 Flash 动画或 JavaScript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。

二，常用属性；

    1，transition 属性主要包含四个属性值：

      1），用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属 性改 变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）；当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果;

      2），transition-duration -- 定义过渡效果花费的时间，默认是 0；

      3），transition-timing-function -- 允许根据时间的推进去改变属性值的变换速率，

      transition-timing-function有6个可能值：

         a、ease：（逐渐变慢）默认值

         b、linear：（匀速），linear 

         c、ease-in：(加速)

         d、ease-out：（减速），

         e、ease-in-out：（加速然后减速）

         f、cubic-bezier：（该值允许你去自定义一个时间曲线）特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

      4），transition-delay -- 用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，默认是 0。

      5），transition -- 简写属性，用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开。

       如：transition: <property> <duration> <animation type> <delay>如备课文件夹所示：

过渡课堂笔记

标签：

原文地址：http://www.cnblogs.com/zhuyiran/p/5666334.html