上一篇文章讲解了css3动画中的一个即transitions，那么今天来说说另外一个animations。和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属性值来实现更为复杂的动画效果。
首先来看一个示例：

<!DOCTYPE html>

<head>

    <meta charset='utf-8'>

    <title>HTML5</title>

</head>

<body>

    <style>

        #animations{

            background-color: red;

            width:100px;

        }

        @-webkit-keyframes mycolor{

            0%{

                background-color: red;

                -webkit-transform:rotate(0deg);

            }

            40%{

                background-color: blue;

                -webkit-transform:rotate(30deg);

            }

            70%{

                background-color: yellow;

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

            }

            100%{

                background-color: red;

                -webkit-transform:rotate(0deg);

            }

        }

        @-moz-keyframes mycolor{

            0%{

                background-color: red;

                -moz-transform:rotate(0deg);

            }

            40%{

                background-color: blue;

                -moz-transform:rotate(30deg);

            }

            70%{

                background-color: yellow;

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

            }

            100%{

                background-color: red;

                -moz-transform:rotate(0deg);

            }

        }

        #animations:hover{

            -webkit-animation-name:mycolor;

            -webkit-animation-duration:5s;

            -webkit-animation-timing-function:linear;

            -webkit-animation-iteration-count:infinite;

            -moz-animation-name:mycolor;

            -moz-animation-duration:5s;

            -moz-animation-timing-function:linear;

            -moz-animation-iteration-count:infinite;

        }

    </style>

    <div id="animations">

        鼠标放在我身上可以吗

    </div>

</body>

</html>

下面解释以上代码：
@-webkit-keyframes 关键帧集合名{
创建关键帧的代码
40%{
本关键帧中的样式代码
}
}
其中的40% 0% 100%等可以自己定义的，表示一个过程的不同阶段，如果你有兴趣可以把每个阶段都写下来的。然后是在某个元素的某种状态下来使用它，比如上面的hover时使用时的格式为：
-webkit-animation-name:mycolor; 表示关键帧集合的名称，记得加上不同的前缀
-webkit-animation-duration:5s; 表示完成这个动作所需要的时间
-webkit-animation-timing-function:linear;表示实现动画的方法
-webkit-animation-iteration-count:infinite;表示动画播放次数
实现动画的方法的参数有：
linear：开始和结束以同样的速度进行改变
ease-in：开始慢，然后速度沿曲线值进行加快
ease-out：开始快，然后速度沿曲线值进行放慢
ease：开始慢，然后速度沿曲线值进行加快，然后再沿曲线值放慢
ease-in-out:动画以低速开始和结束
动画的播放次数参数：
n：具体的值
infinite：一直播放
还有：
-webkit-animation-delay:2s;动画的延迟时间

有了以上基础我们就可以做一个实现网页的淡入效果：

<!DOCTYPE html>

<head>

    <meta charset='utf-8'>

    <title>HTML5</title>

    <style>

        @-webkit-keyframes fadein{

            0%{

                opacity: 0;

                background-color: white;

            }

            100%{

                opacity: 1;

                background-color: white;

            }

        }

        @-moz-keyframes fadein{

            0%{

                opacity: 0;

                background-color: white;

            }

            100%{

                opacity: 1;

                background-color: white;

            }

        }

        body{

            -webkit-animation-name:fadein;

            -webkit-animation-duration:5s;

            -webkit-animation-timing-function:linear;

            -webkit-animation-iteration-count:1;

            -moz-animation-name:fadein;

            -moz-animation-duration:5s;

            -moz-animation-timing-function:linear;

            -moz-animation-iteration-count:1;

        }

    </style>

</head>

<body>

示例

</body>

</html>

动画就说这些了，还有一些大家可以参考w3c官方手册。

CSS3中的动画功能（二）的更多相关文章

  1. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  2. css3中的动画功能

    直接用我的一段代码演示下css3中实现动画效果的事例,让一个div自动旋转起来 代码如下: <!doctype html> <html lang="en"> ...

  3. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  4. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  5. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  7. CSS3的transition动画功能

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

  8. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  9. 学习css3中的动画

    css animations 主要有两块构成,那么是哪两块呢? keyframes : 定义了什么阶段展示什么样的动画 animation 属性 :把动画挂载到一个具体的dom上,并且定义如何动起来: ...

随机推荐

  1. linux c++应用程序内存高或者占用CPU高的解决方案_20161213

    对于绝大多数实时程序来说,实时处理相关程序中的循环问题所带来的对机器的损耗和自身的处理速度的平衡,以及与其他程序的交互以及对其他功能的影响难免会成为程序设计中最大的障碍同时也是最大的突破点. 在所有这 ...

  2. 计算节点宕机了怎么办？- 每天5分钟玩转 OpenStack（43）

    Rebuild 可以恢复损坏的 instance. 那如果是宿主机坏了怎么办呢? 比如硬件故障或者断电造成整台计算节点无法工作,该节点上运行的 instance 如何恢复呢? 用 Shelve 或者 ...

  3. 使用 python 获取 Linux 的 IP 信息(通过 ifconfig 命令)

    我们可以使用 python 代码通过调用 ifconfig 命令来获取 Linux 主机的 IP 相关信息,包括:网卡名称.MAC地址.IP地址等. 第一种实现方式: #!/usr/bin/pytho ...

  4. Linux简介及常用命令使用4--linux高级命令与技巧

    top 几个磁盘fdisk -l 磁盘空间 df -lhdf -al 查看进程:ps -ef"grep java杀死进程:kill -9 进程号 more中过滤 more xxx |grep ...

  5. hadoop2.6.2+hbase+zookeeper环境搭建

    1.hadoop环境搭建,版本:2.6.2,参考:http://www.cnblogs.com/bookwed/p/5251393.html 启动服务:在master机器上,进入hadoop安装目录, ...

  6. <总结>delphi WebBrowser控件的使用中出现的bug

    Delphi WebBrowser控件的使用中出现的bug:  1.WebBrowser.Visible=false:Visible属性不能使WebBrowser控件不可见,暂时用 WebBrowse ...

  7. 传输层协议TCP和UDP

    本文力图简洁,让读者对TCP和UDP有个初步的认知.闲话少说,现在开始吧.TCP和UDP都是传输层的协议.TCP通过三次握手建立可靠连接,对未送达的消息重新进行发送.UDP不建立连接而直接发送,对未送 ...

  8. 【2016-11-10】【坚持学习】【Day23】【Socket 编程初步了解】

    网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.

  9. File类-文件基本操作

    package com.java.io; import java.io.File; import java.io.IOException; import java.math.BigDecimal; i ...

  10. C#进阶系列——DDD领域驱动设计初探（四）：WCF搭建

    前言:前面三篇分享了下DDD里面的两个主要特性:聚合和仓储.领域层的搭建基本完成,当然还涉及到领域事件和领域服务的部分,后面再项目搭建的过程中慢慢引入,博主的思路是先将整个架构走通,然后一步一步来添加 ...