在上次博文中已经讲了transition，其实animation与transition功能相同，都是通过改变元素
的属性来实现动画效果的。但是它们也有区别：transition是只能通过改变指定属性的开始值

与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果。animation却可以通

过定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果。

语法

animation: name duration timing-function delay iteration-count direction;
值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。（infinite无限轮播）
animation-direction 规定是否应该轮流反向播放动画。

有理论不实践，那是纸上谈兵。下面让我们动手写一个简单的示例吧。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title> animation </title>

    <style type="text/css">

    /**/

    div {margin:20px 0;}

    #animate_1 {position:absolute; background-color:red;top:100px;width:500px;}

    @-webkit-keyframes mycolor {

        0% {

            background-color:red;

        }

        40% {

            background-color:darkblue;

        }

        70% {

            background-color:yellow;

        }

        100% {

            background-color:red;

        }

    }

    #animate_1:hover{

        -webkit-animation: mycolor 5s linear infinite

    }

    </style>

</head>

<body>

    <div id="animate_1">animation_1</div>

</body>

</html>

看到了吧，上面的背景色变换，只需要通过animation的几个关键帧来实现动画的效果

当然animation可以同时改变多个属性值来实现比较复杂的动画效果。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title> animation </title>

    <style type="text/css">

    /**/

    div {margin:20px 0;}

    #animate_1 {position:absolute; background-color:red;top:100px;width:500px;}

    @-webkit-keyframes mycolor {

        0% {

            background-color:red;

            -webkit-transform: rotate(0deg);

        }

        40% {

            background-color:darkblue;

            -webkit-transform: rotate(30deg);

        }

        70% {

            background-color:yellow;

            -webkit-transform: rotate(-30deg);

        }

        100% {

            background-color:red;

            -webkit-transform:rotate(0deg);

        }

    }

    #animate_1:hover{

        -webkit-animation: mycolor 5s linear infinite

    }

    </style>

</head>

<body>

    <div id="animate_1">animation_1</div>

</body>

</html>

效果是不是很酷，只要通过css就可以实现背景变色及元素变换角度。在过去那是实现这个效果
可就疯狂的写一大堆的javascript代码了。

下面说下实现动画的方法

animation-timing-function 规定动画的速度曲线。

语法

animation-timing-function: value;
值 描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
动画以低速开始。 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中设置自己的值。可能的值是从 0 到 1 的数值。

 
<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title> animation </title>

    <style type="text/css">

    /**/

    div {margin:20px 0;}

    @-webkit-keyframes myanimate_2 {

        0% {

            width:100px;

            height:100px;

        }

        100% {

            width:500px;

            height:500px;

        }

    }

    #animate_2 {

        width:500px;

        height:500px;

        background-color:red;

        -webkit-animation:myanimate_2 5s ease-out;

    }

    @-webkit-keyframes fadein {

        0% {

            opacity:0;

            background-color:white;

        }

        100% {

            opacity:1;

            background-color:white;

        }

    }

    </style>

</head>

<body>

    <div id="animate_2">animation_2</div>

</body>

</html>

最后一个例子实现一个网站经常用到的动画效果--网页的淡入效果。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title> animation </title>

    <style type="text/css">

    /**/

    div {margin:20px 0;}

    @-webkit-keyframes fadein {

        0% {

            opacity:0;

            background-color:white;

        }

        100% {

            opacity:1;

            background-color:white;

        }

    }

    body {

        -webkit-animation:fadein 5s linear 1;

    }

    </style>

</head>

<body>

    <div id="animate_1">animation_1</div>

    <div id="animate_2">animation_2</div>

</body>

</html>

上面的例子只是一些很基本的动画效果示例。大家对css3的动画效果感兴趣的可以结合我前一次的分享的transition一起实现更加有趣的动画效果。期待大家动手试试吧！

css3系列之animation的更多相关文章

  1. css3系列教程--animation

    Animation:动画animationshi css的动画效果.需要定义keyframe动画对象来实现.为了兼容苹果/chrome,firefox,ie每次定义需要添加-webkit-,-moz- ...

  2. css3系列之animation实现逐帧动画

    上面这个两个简单的动画,是用 animation-timing-function: steps();  这个属性实现的,具体如何实现,看下面: 这上面的图片,也就是我们的素材, 有些人,可能不是很理解 ...

  3. css3系列之过渡transition

    transition 设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等. transition trans ...

  4. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  5. CSS3动画以及animation事件

    1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...

  6. CSS3系列教程:HSL 和HSL

    使用CSS3 HSL声明同样是用来设置颜色的.下一个呢? HSLA? 是的,这个和RGBA的效果是一样的. HSL声明使用色调Hue(H).饱和度Saturation(s)和亮度Lightness(L ...

  7. css3系列之详解perspective

    perspective 简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样.比如说, perspective:800px   意思就是,我在离屏幕800px 的地方观看这 ...

  8. css3系列之transform详解translate

    translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...

  9. CSS3(4)---动画(animation)

    CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...

随机推荐

  1. Futures

    Futures is a framework for expressing asynchronous code in C++ using the Promise/Future pattern. Ove ...

  2. Druid.io系列（三）： Druid集群节点

    原文链接: https://blog.csdn.net/njpjsoftdev/article/details/52955937 1 Historical Node Historical Node的职 ...

  3. JAVA中构造函数的参数传递给类中的实例变量

    class VolcanoRobot1 { String status; int speed; float temperature; VolcanoRobot1(int speed,float tem ...

  4. openStack nova nova valid hosts 优化

    scheduler_default_filters=AllHostsFilterallow_resize_to_same_host=Trueallow_migrate_to_same_host=Tru ...

  5. 关于网页中行内元素的基线(baseline)、行高(line-height)、垂直对齐(vertical-align)等

    CSS基线之道 http://www.qianduan.net/css-baseline-road.html 垂直对齐:vertical-align属性 http://www.ddcat.net/bl ...

  6. GeoServer之styles定制

    GeoServer之styles定制 GeoServer中styles类似于css,将地图中的点线面画出一层皮肤,引用在图层上.不同的地方在于.GeoServer中的styles用的是sld语法,也就 ...

  7. 增强MyEclipse提示功能

    当我们使用MyEclipse编辑代码的时候按住“Ctrl+/”,就能获得代码提示,或者使用“.”的时候就会“点”出属性或方法等,而且提示还会有延迟. 如果我们想无论是按下“.”.“Ctrl+/”甚至是 ...

  8. 在 Golang 中使用 Protobuf

    wget https://github.com/google/protobuf/releases/download/v2.6.1/protobuf-2.6.1.tar.gztar zxvf proto ...

  9. Linux实战教学笔记40： Mha-Atlas-MySQL高可用方案实践(二)

    六,配置VIP漂移 主机名 IP地址(NAT) 漂移VIP 描述 mysql-db01 eth0:192.168.0.51 VIP:192.168.0.60 系统:CentOS6.5(6.x都可以) ...

  10. Perl 变量：数组变量

    Perl 数组Perl 数组一个是存储标量值的列表变量,变量可以是不同类型.数组变量以 @ 开头.访问数组元素使用 $ + 变量名称 + [索引值] 格式来读取. 1.创建列表.数组1.数组变量以 @ ...