在上次博文中已经讲了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. hdu1010 Tempter of the Bone(深搜+剪枝问题)

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

  2. Windows C盘文件夹介绍及说明

    Documents and Settings是什么文件? 答案: 是系统用户设置文件夹,包括各个用户的文档.收藏夹.上网浏览信息.配置文件等. 补:这里面的东西不要随便删除,这保存着所有用户的文档和账 ...

  3. HTML5 File API解读

    1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File ...

  4. C#内存流示例----->用内存流来读取图片

    背景:一个窗体.一个pictureBox.一个lable[没有选择图片,lable的text为"图片未选择"],在pictureBox1的Click事件中添加如下代码: priva ...

  5. application-defined exception

    dataSnap服务器,客户端调用的时候写错了一句话, SQLConnection1->CloneConnection(); 改为 SQLConnection1->Close(); 就好了 ...

  6. Python常用的一些内建函数和math模块函数

    一:Python内建函数 # abs取绝对值 num = -10 print(abs(num)) # max 求最大值 print(max(6, 9, 2, 12, 8)) # min求最小值 pri ...

  7. CentOS 安装python3.5

    1.刚开始centos可能会缺少gcc等组件,先安装组件 yum groupinstall "Development Tools" 2.下载源码,解压后进入目录 #下载地址http ...

  8. [iOS]UIScrollView左右拨动，第二页宽度只有一半问题

    用UIScrollView动态加入新View,而这个View是Xib方式创建,如果设置view的frame,这个view的宽度却只有设置的一半,很奇怪.于是我只设置view的frame的x值,不设置整 ...

  9. Centos6、7 PHP5.4 5.5 5.6安装

    https://www.mojowill.com/geek/howto-install-php-5-4-5-5-or-5-6-on-centos-6-and-centos-7/ https://blo ...

  10. onload函数和自执行函数的区别(jquery API网址:http://jquery.cuishifeng.cn/)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...