最近一个小游戏项目用到了CSS3的动画属性，例如transition、transform、animation。经过三个星期，终于做完了，利用周末好好梳理总结一下。

  1. keyframes
    这个属性用来定义一系列关键帧。也就是在动画运行的全过程中的一个个中间点。

    Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

    Chrome 和 Safari 需要前缀 -webkit-。


  2. animation的属性

  3. animation 缩写
     
    animation: name duration timing-function delay iteration-count direction;
  4. 一些重点难点的理解
    animation-delay
    这个属性是规定动画开始前等待几秒才开始。本来是很好理解的，但是当时就有个疑问：假如我的动画是连续执行好多次的情况下的话，是第一次执行前才会延迟还是每次执行前都会延迟呢？答案是：只有第一次会。 
     <!DOCTYPE HTML>
    
 <html>
    
 <head>
    
 <meta charset="utf-8">
    
 <title>delay</title>
    
 <meta name="viewport" content="width=device-width, initial-scale=1" />

 <style type="text/css">
    
     @-webkit-keyframes delay{

         99%{
    
             -webkit-transform:translate(100px,0);
    
         }

     }
    
     .delay{

         width:100px;height:100px;
    
         background-color: #000;
    
         -webkit-animation:delay 1s linear 2s infinite;
    
         animation:delay 1s linear 2s infinite;
    
     }
    
 </style>
    
 </head>
    
 <body>
    
     <div class="delay"></div>
    
 </body>
    
 </html>
  5. animation-fill-mode
    该属性有四个值
    none：默认值。不设置对象动画之外的状态
    forwards：设置对象状态为动画结束时的状态
    backwards：设置对象状态为动画开始时的状态
    both：设置对象状态为动画结束或开始的状态
    一开始比较纠结着三个到底有什么区别。网上也找了，发现网上说的有点错误。起码我试了一下forwards和both的效果是一模一样的。都是动画运行完了停在哪里就是哪里。至于backwards，就是总停在一开始的状态。 
     <!DOCTYPE HTML>
    
 <html>
    
 <head>
    
 <meta charset="utf-8">
    
 <title>delay</title>
    
 <meta name="viewport" content="width=device-width, initial-scale=1" />

 <style type="text/css">
    
     @-webkit-keyframes delay{

         100%{
    
             -webkit-transform:translate(100px,0);
    
         }

     }
    
     .delay{

         width:100px;height:100px;
    
         background-color: #000;
    
         -webkit-animation:delay 1s linear 2 forwards alternate;
    
     }
    
 </style>
    
 </head>
    
 <body>
    
     <div class="delay"></div>
    
 </body>
    
 </html>
     <!DOCTYPE HTML>
    
 <html>
    
 <head>
    
 <meta charset="utf-8">
    
 <title>delay</title>
    
 <meta name="viewport" content="width=device-width, initial-scale=1" />

 <style type="text/css">
    
     @-webkit-keyframes delay{

         100%{
    
             -webkit-transform:translate(100px,0);
    
         }

     }
    
     .delay{

         width:100px;height:100px;
    
         background-color: #000;
    
         -webkit-animation:delay 1s linear 2 both alternate;
    
     }
    
 </style>
    
 </head>
    
 <body>
    
     <div class="delay"></div>
    
 </body>
    
 </html>

    两段代码主要说明在forwards和both的情况下动画在设置了反向运行偶次数时，效果仍然一样。因为之前看到网上说的是forwards在偶次数反向是会停在关键帧的100%处，而不是0%处。

  6. iteration-count
    运行次数。
    这个本来没什么好说的，一目了然，但是无意中发现，有以下的特殊情况：
    不能为负数
    可以为0        为0的时候，按1来算
    可以为小数       小数的时候，不会取整。而是多少就运行多少，比如 .5 就运行到50%的位置。
  7. 事件

    在动画的世界里，总有这样的需求，就是某个动画结束了之后才进行下一个动画，这个时候就要知道上一个动画是什么时候结束的了。虽然可以用setTimeout来计时达到差不多的效果，但是总感觉不够精确。
    还好，CSS3的动画有js事件。
    开始：animationstart
    迭代：animationiteration
    结束：animationend

     <!DOCTYPE HTML>
    
 <html>
    
 <head>
    
 <meta charset="utf-8">
    
 <title>delay</title>
    
 <meta name="viewport" content="width=device-width, initial-scale=1" />

 <style type="text/css">
    
     @-webkit-keyframes delay{

         100%{
    
             -webkit-transform:translate(100px,0);
    
         }

     }
    
     .delay{

         width:100px;height:100px;
    
         background-color: #000;
    
         -webkit-animation:delay 1s linear 2 both alternate;
    
     }
    
 </style>
    
 </head>
    
 <body>
    
     <div class="delay"></div>
    
     <script type="text/javascript">
    
     window.onload = function(){
    
         var delay = document.getElementsByClassName('delay')[0],
    
         time1,
    
         time2;
    
         delay.addEventListener('webkitAnimationStart',function(){
    
             time1 = new Date().getTime();
    
             time2 = time1;
    
             console.log(time2-time1+'ms')

         })
    
         delay.addEventListener('webkitAnimationIteration',function(){
    
             time2 = new Date().getTime();
    
             console.log(time2-time1+'ms')
    
         })
    
         delay.addEventListener('webkitAnimationEnd',function(){
    
             time2 = new Date().getTime();
    
             console.log(time2-time1+'ms')
    
         })
    
     }
    
     </script>
    
 </body>
    
 </html>

    从代码可以看出，iteration是在动画重复执行的时候触发的。

animation CSS3动画总结的更多相关文章

  1. animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画

    通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,您能够多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或者通 ...

  2. 深入理解CSS3 Animation 帧动画

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  3. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  5. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  6. 深入理解CSS3 Animation 帧动画 ( steps )

    作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...

  7. css3学习--css3动画详解一(animation属性）

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

  8. jQuery Animation实现CSS3动画

    jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:3 ...

  9. 深入理解CSS3 Animation 帧动画（转）

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

随机推荐

  1. git 提交代码出现git Permission to Xx denied to Xx 错误

    http://blog.csdn.net/chen_xi_hao/article/details/71172279

  2. MySql学习—— 查询性能优化 深入理解MySql如何执行查询

    本篇深入了解查询优化和服务器的内部机制,了解MySql如何执行特定查询,从中也可以知道如何更改查询执行计划,当我们深入理解MySql如何真正地执行查询,明白高效和低效的真正含义,在实际应用中就能扬长避 ...

  3. C/C++对Lu系统内置动态对象进行运算符重载

    欢迎访问Lu程序设计 C/C++对Lu系统内置动态对象进行运算符重载 1 说明 要演示本文的例子,你必须下载Lu32脚本系统.本文的例子需要lu32.dll.lu32.lib.C格式的头文件lu32. ...

  4. with操作符损耗性能的原因

    当函数运行是,创建一个[[scope]]指向的被称为作用域链的可变对象集合,作用域链的最前端是一个包含所有的局部变量.参数.this等的被称为“激活对象”的对象. 在标示符查找的过程中,从作用域的最前 ...

  5. WEB安全第五篇--其他注入的奇技淫巧：XML注入、Xpath注入、Json注入、CRLF注入

    零.前言 最近做专心web安全有一段时间了,但是目测后面的活会有些复杂,涉及到更多的中间件.底层安全.漏洞研究与安全建设等越来越复杂的东东,所以在这里想写一个系列关于web安全基础以及一些讨巧的pay ...

  6. 【BZOJ4424】Cf19E Fairy DFS树

    [BZOJ4424]Cf19E Fairy Description 给定 n 个点,m 条边的无向图,可以从图中删除一条边,问删除哪些边可以使图变成一个二分图. Input 第 1 行包含两个整数 n ...

  7. 【BZOJ1045】[HAOI2008] 糖果传递 贪心

    [BZOJ1045][HAOI2008] 糖果传递 Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正 ...

  8. 【Android】保存Bitmap到SD卡

    1.打开读写SD卡的权限 需要在AndroidManifest.xml加入如下代码: <uses-permission android:name="android.permission ...

  9. （转）梯度下降法及其Python实现

    梯度下降法(gradient descent),又名最速下降法(steepest descent)是求解无约束最优化问题最常用的方法,它是一种迭代方法,每一步主要的操作是求解目标函数的梯度向量,将当前 ...

  10. 170613、Spring整合RabbitMQ实例

    一.rabbitMQ简介 1.1.rabbitMQ的优点(适用范围)1. 基于erlang语言开发具有高可用高并发的优点,适合集群服务器.2. 健壮.稳定.易用.跨平台.支持多种语言.文档齐全.3. ...