最近一个小游戏项目用到了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. Python 收集主机信息

    写一个 python 脚本,收集以下信息 ( CentOS 6 ) : IP地址 <ip>    主机名 <hostname>    操作系统版本 <osver>  ...

  2. Facebook广告目标摘要

    Facebook Ads look slightly different depending on the results you want. This guide includes recommen ...

  3. xdebug和最重要的php调试技巧

    好几年没有写PHP代码了,最近写了一些.我比较厌烦php,主要是调试麻烦,要按无数次F5,经常刷出空白. 以前调试总是依赖于在代码中加入下面两行 error_reporting(E_ALL ^ E_N ...

  4. 免费在线的web性能测试网站

    由于需要测试网站并发,所以去百度搜了搜,最开始找了个webkaka结果告知,已下线,好像是个很好的在线网站.现在只有网站速度诊断的http://pagespeed.webkaka.com/

  5. poj_3468 线段树

    题目大意 一个数列,每次操作可以是将某区间数字都加上一个相同的整数,也可以是询问一个区间中所有数字的和.(这里区间指的是数列中连续的若干个数)对每次询问给出结果. 思路 对于区间的查找更新操作,可以考 ...

  6. Linux学习——定义命令行函数(cd .. -> ..)

    在使用shell的时候,每天要面对各种命令行,比如ls , cd .. 等 抱着简单,可依赖的思想.有些可以简化的操作可以要通过在 ~/.bashrc 中进行添加: 1. cd .. -> .. ...

  7. Ubuntu16.04安装Nessus和MSF

    一.Nessus篇: 1.参考文献:https://www.cnblogs.com/shamojituan/p/6511208.html 2.下载地址:https://downloads.nessus ...

  8. chrome单步调试代码

    单步调试代码 所有步骤选项均通过边栏中的可点击图标 表示,但也可以通过快捷键触发(鼠标悬停在操作图标上就可以看到快捷键).下面是简要介绍: 图标/按钮 操作 描述 Resume 继续执行直到下一个断点 ...

  9. 【BZOJ3280】小R的烦恼 最小费用最大流

    [BZOJ3280]小R的烦恼 Description 小R最近遇上了大麻烦,他的程序设计挂科了.于是他只好找程设老师求情.善良的程设老师答应不挂他,但是要求小R帮助他一起解决一个难题. 问题是这样的 ...

  10. ios UITableView默认选中第一行

    NSIndexPath *ip = [NSIndexPath indexPathForRow:0inSection:0]; [titleTableViewselectRowAtIndexPath:ip ...