在上次博文中已经讲了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. letter

    while (cin.eof() != true) //cin.eof判断是否到达文件EOF,如果读取到EOF return true,读取到EOF则无法再次输入 while (cin.fail() ...

  2. jQuery基本API小结(上)--选择器-DOM操作-动画-Ajax

    一.JQuery基础选择器 1.基本选择器(CSS选择器) 2.$()中的()不一定是指定元素,也可能是函数. 3.“*”号选择器,它的功能是获取页面中的全部元素:$(“*”). 由于使用*选择器获取 ...

  3. C++与C#有关对库（动态库dll,静态库.lib）文件的调用

    1 动态库的相互调用 1.1 C#调用C++ dll步骤(只能导出方法): 1. c++建立空项目->源文件文件夹中添加cpp文件和函数 2. c++属性设置中,配置类型设置为动态库dll,公共 ...

  4. Linux Centos 7 RabbitMQ 安装

    下载地址:http://www.rabbitmq.com/releases/rabbitmq-server/ 找到rabbitmq-server-3.6.15-1.el7.noarch.rpm 第一步 ...

  5. sudo:must be setuid root 解决方法 <转>

    http://walkerqt.blog.51cto.com/1310630/1354103

  6. Linux下git使用详解1

    1. git使用第一步:安装git $ sudo apt-get install git-core #ubuntu系统下使用apt-get $ yum install git-core #译者注,在r ...

  7. Android开发实战之拥有Material Design风格的侧滑布局

    在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件——DrawLayout,使用方式也 ...

  8. hdu1710-Binary Tree Traversals （由二叉树的先序序列和中序序列求后序序列）

    http://acm.hdu.edu.cn/showproblem.php?pid=1710 Binary Tree Traversals Time Limit: 1000/1000 MS (Java ...

  9. Codeforces 678E 状压DP

    题意:有n位选手,已知n位选手之间两两获胜的概率,问主角(第一个选手)最终站在擂台上的概率是多少? 思路:一看数据范围肯定是状压DP,不过虽然是概率DP,但是需要倒着推:我们如果正着推式子的话,初始状 ...

  10. MAC命令大全

      OSX 的文件系统 OSX 采用的Unix文件系统,所有文件都挂在跟目录 / 下面,所以不在要有Windows 下的盘符概念. 你在桌面上看到的硬盘都挂在 /Volumes 下. 比如接上个叫做 ...