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. Android学习笔记_70_一个应用程序启动另一个应用程序的Activity

    第一种(我自己写的) :之前在网上看来一些,很多不是我要的可以启动另外一个应用程序的主Activity. //这些代码是启动另外的一个应用程序的主Activity,当然也可以启动任意一个Activit ...

  2. ids for this class must be manually assigned before calling save():

    Caused by: javax.persistence.PersistenceException: org.hibernate.id.IdentifierGenerationException: i ...

  3. HDU 1175 连连看（超级经典的bfs之一）

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1175 连连看 Time Limit: 20000/10000 MS (Java/Others)     ...

  4. JSON Web Tokens介绍

    转载请标明出处: http://blog.csdn.net/forezp/article/details/72804324 本文出自方志朋的博客 ##什么是JWT 这篇文章选择性翻译于https:// ...

  5. 构建Linux根文件系统（未完待续）

          所谓制作根文件系统, 就是创建各种目录, 并且在里面创建各种文件. 比如在/bin ./sbin 目录下存放各种可执行程序, 在/etc 目录下存放配置文件, 在/lib 目录下存放库文件 ...

  6. 没有上司的舞会（树形DP）

    题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...

  7. poj 3259 Wormholes ： spfa 双端队列优化 判负环 O(k*E)

    /** problem: http://poj.org/problem?id=3259 spfa判负环: 当有个点被松弛了n次,则这个点必定为负环中的一个点(n为点的个数) spfa双端队列优化: 维 ...

  8. C#判断系统是64位还是32位 支持.net4.0以前的版本

    C#判断系统是64位还是32位的时候引用了一串代码,这个代码是从园子里面其他博文中转载过来的,引入自己的项目中发现无法使用,在引用了相应的命名空间之后还是提示: "未能找到类型或命名空间名称 ...

  9. Tools - GitBook

    GitBook图书绑定自定义的域名 https://jingyan.baidu.com/article/335530daf86c3b19cb41c3f3.html

  10. npm cnpm npx nvm 傻傻分不清

    用过 npm cnpm吗?知道 npx nvm 吗? 唔~ npm npm 的全称是 Node Package Manager 是 JavaScript 世界的包管理工具,并且是 Node.js 平台 ...