分享你的福利
www.fankuiba.com

WordPress中CSS3的过渡效果(transition)与动画效果(animation)

使用CSS去做一般是为了让不懂JS的设计人员也能实现动画效果,

但是这类效果一般使用JS脚本可以更灵活,也更好优化。

本站侧边栏的JV直达JV外汇交易分类导航也采用了过渡,实现hover时导航逐渐淡化的效果。

2014-03-16_233207

下面是两种效果的说明及演示:

1.Transition

Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值。目前Firefox、Opera、Safari和Chrome都支持transition ,IE还不支持。

语法:transition: property duration timing-function delay;

说明:

transition-property      指定要改变CSS属性的名称
transition-duration      指定过渡效果要花多少时间(s/ms)
transition-timing-function   指定过渡效果的速度
transition-delay       定义过渡效果的延迟时间.

代码如下:

<style type="text/css">
#jvbox
{
width:100px; height:100px; background:gray; transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
#jvbox:hover
{
width:300px;
}
</style>
<div id="jvbox"></div>

效果如下(鼠标移上去试试):


2. Animation

CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。

目前支持Animation的浏览器有:Firefox、 Safari 和 Chrome,IE和Opera还不支持。下面看下一个简单的实例:

语法:animation: name duration timing-function delay iteration-count direction;

说明:

animation-name       指定动画帧的名称
animation-duration       指定动画运行的时间:秒(s)和毫秒(ms)
animation-timing-function   指定动画运行的速度
animation-delay        指定动画的延迟时间
animation-iteration-count   指定动画的重复数
animation-direction     指定动画是否以相反的方向运行动画

代码如下:

<style type="text/css">
#jvbox1
{
width:100px;
height:100px;
background:gray;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /*Firefox*/
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes mymove /*Firefox*/
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
<div id="jvbox1″></div>

效果如下: