Osheep

时光不回头,当下最重要。

CSS3动画之Transitions分享

Transitions

Transition 有下面些具体属性:

transition-property:用于指定过渡的性质,比如 transition-property:backgrond 就是指 backgound 参与这个过渡

transition-duration:用于指定这个过渡的持续时间

transition-delay:用于制定延迟过渡的时间

transition-timing-function:用于指定过渡类型,有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

可能您觉得摸不着头脑,其实很简单,我们用一个例子说明,参看一下如下代码:

 CSS3 的 Transition
<div id="transDiv" class="transStart"> transition </div> 

 .transStart { 
    background-color: white; 
    -webkit-transition: background-color 0.3s linear; 
    -moz-transition: background-color 0.3s linear; 
    -o-transition: background-color 0.3s linear; 
    transition: background-color 0.3s linear; 
 } 
 .transEnd { 
    background-color: red; 
 }

这里他说明的是,这里 id 为“transDiv”的 div,当它的初始“background-color”属性变化时(被 JavaScript 修改),会呈现出一种变化效果,持续时间为 0.3 秒,效果为均匀变换(linear)。如:该 div 的 class 属性由“transStart”改为“transEnd”,其背景会由白(white)渐变到红(red)。

到了这里,你可以想知道transition-timing-function有什么区别呢:

语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

提示:请在实例中测试不同的值,这样可以更好地理解它们的工作原理。

《CSS3动画之Transitions分享》

好了,是不是有些迫不及待的去尝试呢!

点赞