CSS3 Animation 实现对象从右到左渐变的css3动画效果

CSS3 Animation

CSS3中的Animation与HTML5中的Canvas绘制动画不同。Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码（像我这种不懂js的人来说是件很高兴的事了），只是有一点不足之处，我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，我建议大家还是使用flash或js等。虽然说Animation制作出来的动画简单粗糙，但我想还是不能减少我们大家对其学习的热情。

在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。

Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。

看一个实例

@-webkit-keyframes fadeInRight {

0% {

opacity: 0;

-webkit-transform: translateX(20px);

}

100% {

opacity: 1;

-webkit-transform: translateX(0);

}

}

这里我们定义了一个叫“fadeInRight”的动画，他的动画是从0%开始到100%时结束。fadeInRight动画在0%时是透明，translateX取值x表示x轴过渡20px。动画在100%时，不透明，x轴没有过渡值。

Keyframes定义好了以后，我们需要怎么去调用刚才定义好的动画“fadeInRight”。animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性值，这也就是回到我们上面所说的，我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。

下面我们来看看怎么给一个元素调用animation属性

li{

animation-name:'fadeInRight';/*动画属性名，也就是我们前面keyframes定义的动画名*/

animation-duration: 2s;/*动画持续时间*/

animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/

animation-delay:1s;/*动画延迟时间*/

animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/

animation-direction: alternate;/*定义动画方式*/

}

animation中的各个属性的语法和取值

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

如下图所示

兼容的浏览器

CSS3的animation到目前为止支持的最好的是webkit内核的浏览器，因为最早提出这个属性的就是safari公司，chrome 浏览器浏览效果更佳。

DEMO一：

这个demo主要是通过在keyframes中改变元素的opacity、translateX两个属性，来达到一种从右到左一种渐变的效果，我们来看看其实现代码

HTML Code:

<nav>

<ul>

<li><a href="/download/" target="_blank">个人网站模板</a></li>

<li><a href="/newsfree/" target="_blank">企业网站模板</a></li>

<li><a href="/web/" target="_blank">网站建设</a></li>

<li><a href="/newshtml5/" target="_blank">HTML5案例</a></li>

<li><a href="/jstt/" target="_blank">技术探讨</a></li>

<li><a href="/news/case/" target="_blank">作品展示</a></li>

</ul>

</nav>

CSS Code：（重点部分代码）

@-webkit-keyframes fadeInRight {

0% {

opacity: 0;

-webkit-transform: translateX(20px);

}

100% {

opacity: 1;

-webkit-transform: translateX(0);

}

}

@keyframes fadeInRight {

0% {

opacity: 0;

transform: translateX(20px);

}

100% {

opacity: 1;

transform: translateX(0);

}

}

/*调用animation属性，从而让按钮在载入页面时就具有动画效果 以-webkit为例，请为不同的浏览器添加前缀 */

nav ul li:nth-child(1){

-webkit-animation-name: "fadeInRight"; /*动画名称，需要跟@keyframes定义的名称一致*/

-webkit-animation-duration: 2s;/*动画持续的时间长*/

-webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/

}

nav ul li:nth-child(2){ -webkit-animation:'fadeInRight' 3s 1} /* 简写 */

nav ul li:nth-child(3){ -webkit-animation:'fadeInRight' 4s 1}

nav ul li:nth-child(4){ -webkit-animation:'fadeInRight' 5s 1}

nav ul li:nth-child(5){ -webkit-animation:'fadeInRight' 6s 1}

nav ul li:nth-child(6){ -webkit-animation:'fadeInRight' 7s 1}

查看演示页面：DEMO

如果各位有更好的建议，可以通过QQ或email等方式联系。感兴趣的朋友请观注本站关于css3的内容更新，我将不断的整理css3相关方面的知识，和大家一起学习，一起探讨。

本文链接：http://so.lmcjl.com/news/2285/