在上次博文中已经讲了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. toString()和toLocaleString()的区别

    在数字转换成字符串的时候,并没有感觉这两个方法有什么区别,如下: 1 2 3 4 5 6 7 8 var e=123     e.toString() "123"   e.toLo ...

  2. django之设置分页

    分页 Django提供了一些类实现管理数据分页,这些类位于django/core/paginator.py中 Paginator对象 Paginator(列表,int):返回分页对象,参数为列表数据, ...

  3. 「小程序JAVA实战」小程序模块之间引用（19）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-19/ 上一节,讲了页面引用模块的概念,如果是模块之前引用呢?源码:https://github.c ...

  4. Django 新手图文教程 （转）

    简约而不简单的 Django 新手图文教程 环境:windows7,python3.5.1,pycharm专业版,Django 1.10版,pip3 一.Django简介 百度百科:开放源代码的Web ...

  5. PHP 连接打开新网页带参数

    PHP 连接打开新网页带参数 detail.php?ID=<?PHP echo $row['ID'];?> aa.php?ID=123 取ID参数 $aid=$_GET['ID']; 网页 ...

  6. F5负载均衡架构图

    原文:https://blog.csdn.net/qq_35611533/article/details/51917279?locationNum=1&fps=1

  7. MyBatis 学习记录2 Mapper对象是如何生成的

    主题 以前我一直有一个问题不懂.并且觉得很神奇.就是Mybatis我们开发的时候只需要定义接口,并没有写实现类,为什么我们运行的时候就可以直接使用? 现在我想分享下这部分大致是怎么实现的. 在启动的时 ...

  8. 导入本体到Jena TDB数据库

    本体的存储方法或称本体持久化,大致分为基于内存的方式.基于文件的方式.基于数据库的方式和专门的管理工具方式4种(傅柱等, 2013).其中,基于数据库的方式又有基于关系数据库.基于面向对象数据库.基于 ...

  9. linux安装mysql服务分两种安装方法：

    linux安装mysql服务分两种安装方法: ①源码安装,优点是安装包比较小,只有十多M,缺点是安装依赖的库多,安装编译时间长,安装步骤复杂容易出错: ②使用官方编译好的二进制文件安装,优点是安装速度 ...

  10. SQLSERVER2012误删数据恢复过程

    由于长时间从事企业应用系统开发,前往用户现场升级.调试系统是比较常做的事情,但是就在周一,由于同事的失误在毫无知觉的情况下误删了生产数据库几乎所有的数据.当我发现的那一刻,感觉头发都立起来了,心想这他 ...