CSS3里的缓动渐变:窜鸡鲟(transition)的简单使用

作为一个设计,其实CSS我之前是并不熟悉的,我只能靠着以前的底子勉强看得懂它想表达啥,真的认真拾起来学是因为Flash被各种嫌弃的时候开始。以前我做动画基本使用FL,其实对于FL的时间轴概念能够理解的话,这个工具确实是很好用的。当然那个有点凹人的ActionScript3.0不在此列,那玩意儿比起AS2来要复杂且规范许多,但是如果做简单的动画使用AS3就有点太费事了。今天要扯的是CSS3里的缓动渐变:窜鸡鲟。

transition的使用其实挺简单易懂的,设置一个CSS属性,再设置一个变化的时间,这就已然足够。如果你有闲心还可以再给它一个缓动效果,或者是动画的延迟时间。是的它就只有这四个属性需要你去填写。transition属性其实不能算很够格的动画效果,它充其量能算是一个过渡效果。但是这样的效果在很多时候就已经足够了不是么。我写了一个简单的效果如下:

cjx

transition的过渡效果经常配合伪类hover来实现,当鼠标放上去的时候开始过渡效果。我这里只是定义了一条超链里的几个文字,关于他们的格式,大小,字体,颜色。而我的transition属性并没有写满四个属性,我只是写了要改变的CSS属性:color,和过渡所使用的时间:2s,然后我在行为的伪类里改变了颜色的值。当我将鼠标放上去的时候,这个超大的Dante就会在两秒内从灰色过渡为蓝色,效果很宜人。

需要注意的是transition要考虑浏览器兼容,默认的写法兼容IE,但是如果要兼容FF,Chrome,Opera的话就要再多写几句:

-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */

就这么简单。

不过说到了窜鸡鲟就顺便说一下CSS3里另一个动画效果:@keyframes

这个东西也不难,在使用的时候是用animation来定义的,涉及到动画名以及持续时长等等属性,而@keyframes你可以理解为定义了时间轴里的关键帧,划分几个关键帧可以用百分比来定义,在每个关键帧里定义要改变的CSS属性。

animation:mymove 5s infinite;
}

@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}

深挖的话肯定还有更多酷炫的功能,我这里提到的只是简单的应用,等哪天摸到更亮的点再继续。


           新的一篇:

Leave a Reply