在上次博文中已经讲了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. Java复习——网络编程

    Java从最开始就是支持网络编程的,也正是网络使Java得到发展繁荣.在这里我记录一下如何使用Java进行网络编程,什么是Socket以及Java实现TCP,UDP的编程模型. InetAddress ...

  2. Autofac ASP.NET Web API (Beta) Integration

    With the beta release of ASP.NET MVC 4 and the ASP.NET Web API being released a few weeks ago, I dec ...

  3. oracle 索引使用小结

    1. 普通索引 create index my_index on test (col_1); 可创建合并两列或多列的索引,最多可将32列合并在一个索引中(位图索引最多可合并30列) create in ...

  4. hdu1010 Tempter of the Bone(深搜+剪枝问题)

    Tempter of the Bone Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission( ...

  5. 防火墙启动失败，提示最后一行出错【COMMIT】

    使用 /etc/init.d/iptables save  后 iptables配置文件发生变化 并生成iptables.save vim iptables.save    [配置内容则是原来的] s ...

  6. Julia - 函数的参数传递

    不定参数 不定参数的函数也称变参函数 函数的参数可以被定义成任意个 可以在最后一个参数后紧跟省略号“...”来定义变参函数 julia> bar(x, y, z...) = (x, y, z) ...

  7. Notes About Singular Value Decomposition

    A brief summary of SVD: An original matrix Amn is represented as a muliplication of three matrices: ...

  8. 摆脱Login控件，自己定义登录操作

    protected void ImageButton1_Click(object sender, ImageClickEventArgs e) { //在登录过程中,程序自动使用login.aspx进 ...

  9. **三元运算和lambda

    三元运算 在说三元运算之前,我们看一段代码: a = 1 if a == 1: name = 'Hello' else: name = 'World' print(name) 输出:Hello 对于这 ...

  10. Mysql在spring中jdbc.properties连接配置

    ############################## mysql的数据源 ############################## jdbc.driver=com.mysql.jdbc.D ...