CSS3动画分为二部份：

1、定义动画行为：

使用@keyframes定义动画行为，有两种方式：

方式一：仅定义动画起始样式，与动画结束样式

 @keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-moz-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-webkit-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-o-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

方式二：定义动画进展中的每步样式，百分比表示动画执行的进度百分值

 @keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-moz-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-webkit-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-o-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

2、定义动画执行方式。

将动画的行为附加到元素上，使其按照此规则执行动画效果，但我们还要给动画设定执行方式，比如什么动画让它多长时间完成，是否循环执行动画等。

动画执行方式语法：

 animation: name duration timing-function delay iteration-count direction;

语法中译：

 animation:

     动画行为名称，在keyframes内定义的名称

     动画周期，比如 5s 表示5秒完成此动画一次

     动画的速度曲线， linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

     动画何时开始，默认值0，立刻播放

     动画被播放的次数，默认值1，值infinite 表示一直循环播放

     动画是否在下一周期逆向地播放，可选值：  normal（默认，不逆向地播放）  | alternate（动画应该轮流反向播放）

3、可以通过增加CSS样式：animation-play-state 来控制CSS3动画暂停与播放

 animation-play-state: paused | running;

 -webkit-animation-play-state: paused | running ;

代码演示:

 <!DOCTYPE html>

 <html lang="zh-cmn-Hans">

 <head>

 <meta charset="utf-8">

 <style>

     a{width:100px;height:30px;display:block;}

     @keyframes myan{

         0%    {background:#066;left:20px;top:20px;}

         50% {background:#090;left:100px;top:100px;}

         100% {background:#093;left:300px; top:300px;}

     }

     #a{

         position:absolute;

         animation: myan 5s linear 2s infinite  alternate;

     }

     #a:hover{

           /* 这里使动画停止了 */

         animation-play-state:paused;

       }

 </style>

 </head>

 <body>

 <div style="position:relative;margin:50px;width:100px;height:100px;background:#ccc;">

     <a href="#" id="a">1111111</a>

     </div>

 </body>

 </html>

CSS3 ：animation 动画的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  5. css3 animation(动画)笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  6. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  7. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  8. CSS3 animation动画，循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  9. css3 animation动画使用

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

  10. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

随机推荐

  1. PHP处理数组和XML之间的互相转换

    PHP将数组转换成XML PHP可以将数组转换成xml格式,简单的办法是遍历数组,然后将数组的key/value转换成xml节点,再直接echo输出了,如: function arrayToXml($ ...

  2. Linux 安装ngnix

    第一步:把nginx的源码包上传到linux系统/home 第二步:解压缩 [root@localhost ~]# tar zxf nginx-1.8.0.tar.gz 第三步:使用configure ...

  3. java 枚举类型enum

    简单介绍 Java 中的枚举类型采用关键字enum 来定义,从jdk1.5才有的新类型,所有的枚举类型都是继承自Enum 类型.要了解枚举类型,建议大家先打开jdk 中的Enum 类简单读一下,这个类 ...

  4. JS获取浏览器高度和宽度

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  5. Oracle,Mysql,SQlserver生成实体映射之SqlSugarT4

    官网:http://www.codeisbug.com 代码已上传GitHub:https://github.com/SeaLee02/sealee 本篇主要讲使用SqlSugar包进行Model生成 ...

  6. mui 的多图片上传

    pickHead(){ var _this = this; plus.gallery.pick(function(path){ _this.headImage=path; var files = [{ ...

  7. 跨交换机的VLAN划分实验

    实验涉及命令以及知识补充 大部分命令和上一篇相同,本篇介绍不同的收获. 上一篇链接: https://www.cnblogs.com/Coeus-P/p/9122462.html 退出命令 ctrl+ ...

  8. oracle远程导出/导入

    创建db_link,远程导出/导入.expdp/impdp Oracle数据库本地磁盘空间有限,或应用系统的需要,会通过远程的方式导出数据库.在oracle当中,exp远程导库的速度太慢,而expdp ...

  9. 混合应用开发：Phonegap VS AppCan

    混合应用开发:Phonegap VS AppCan 简介 Phonegap PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能 ...

  10. 基于layer封装的异步加载分部视图弹出层

    背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的.所以下面的方法就解决了. ...