其实css3动画是就是2种实现，一种是transition，另一种就是animation。transition实现的话就是只能定制开始帧，和结束2帧；而animation实现的话可以写很多关键帧。
没有前戏，直进主题。

transition

包含4个值，例如：-webkit-transition:all .5s ease 1s;
 分别顺序是(m代表必须)： 变换的属性(m)、变换过渡的时间(m)、变换的速率、变换延时执行的时间。
来个小demo：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6.     <style>
  7.         .transition {
  8.             width:30px;
  9.             height: 30px;
  10.             line-height: 30px;
  11.             border-radius: 50%;
  12.             text-align: center;
  13.             display: inline-block;
  14.             background:lightblue;
  15.             -webkit-transition:all .5s ease;
  16.             transition:all .5s ease;
  17.             color:#fff;
  18.         }
  19.         .transition:hover {
  20.             -webkit-transform:rotate(360deg);
  21.             transform:rotate(360deg);
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="transition">×</div>
  27. </body>
  28. </html>

应用例子：
http://skyweaver213.github.io/slide/widget/slide2/slide.html
http://skyweaver213.github.io/slide/widget/slide3/slide.html

animation：

就是一个动画对应一个keyframes，然后一个keyframes 里可以有N多个关键帧。
例如一个keyframes里我们可以这样写：

  1. @-webkit-keyframes go {
  2.     0%, 100% {
  3.         -webkit-transform: translateX(0);
  4.     }
  5.     50% {
  6.         -webkit-transform: translateX(500px);
  7.     }
  8. }

然后我们需要在应用这个keyframes的元素上写一个animation,
例如：-webkit-animation:go 2.5s ease infinite 0;  
参数顺序分别是(m代表必须)：动画名字(m)、执行的时间(m)、过渡的速率、执行多小次、延迟执行的时间

小demo：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         .animation {
  7.             width: 100px;
  8.             height: 100px;
  9.             display: block;
  10.             background: pink;
  11.             -webkit-animation: go 2.5s infinite;
  12.             /*-webkit-animation: go 2.5s cubic-bezier(.25, -0.25, .75, 1.25) infinite;*/
  13.         }
  14.  
  15.         @-webkit-keyframes go {
  16.             0%, 100% {
  17.                 -webkit-transform: translateX(0);
  18.             }
  19.             50% {
  20.                 -webkit-transform: translateX(500px);
  21.             }
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.  
  27. <div class="animation"></div>
  28.  
  29. </body>
  30. </html>

应用deom：loading状态、三条线变箭头。
http://skyweaver213.github.io/slide/widget/slide1/slide.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         .loading {
  7.             position: relative;
  8.             width: 40px;
  9.             height: 40px;
  10.             margin: 40px auto;
  11.             -webkit-transform:rotate(165deg);
  12.         }
  13.         .loading:before, .loading:after {
  14.             content: '';
  15.             position: absolute;
  16.             width: 8px;
  17.             height: 8px;
  18.             top: 50%;
  19.             left: 50%;
  20.             display: inline-block;
  21.             border-radius: 4px;
  22.             -webkit-transform: translate(-50%, -50%);
  23.         }
  24.         .loading:before {
  25.             -webkit-animation:before 2s infinite;
  26.         }
  27.         .loading:after {
  28.             -webkit-animation:after 2s infinite;
  29.         }
  30.  
  31.         @-webkit-keyframes before {
  32.             0% {
  33.                 width: 8px;
  34.                 box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);
  35.             }
  36.  
  37.             35% {
  38.                 width: 40px;
  39.                 box-shadow: 0 -8px rgba(225, 20, 98, 0.75), 0 8px rgba(111, 202, 220, 0.75);
  40.             }
  41.  
  42.             70% {
  43.                 width: 8px;
  44.                 box-shadow: -16px -8px rgba(225, 20, 98, 0.75), 16px 8px rgba(111, 202, 220, 0.75);
  45.             }
  46.  
  47.             100% {
  48.                 box-shadow: 16px -8px rgba(225, 20, 98, 0.75), -16px 8px rgba(111, 202, 220, 0.75);
  49.             }
  50.         }
  51.  
  52.         @-webkit-keyframes after {
  53.             0% {
  54.                 height: 8px;
  55.                 box-shadow: 8px 16px rgba(61, 184, 143, 0.75), -8px -16px rgba(233, 169, 32, 0.75);
  56.             }
  57.  
  58.             35% {
  59.                 height: 40px;
  60.                 box-shadow:8px 0 rgba(61, 184, 143, 0.75),-8px 0 rgba(233, 169, 32, 0.75);
  61.             }
  62.  
  63.             70% {
  64.                 height: 8px;
  65.                 box-shadow:  8px -16px rgba(61, 184, 143, 0.75), -8px 16px rgba(233, 169, 32, 0.75);
  66.             }
  67.  
  68.             100% {
  69.                 box-shadow:  8px 16px rgba(61, 184, 143, 0.75),  -8px -16px rgba(233, 169, 32, 0.75);
  70.             }
  71.         }
  72.  
  73.     </style>
  74. </head>
  75. <body>
  76.     <div class="loading"></div>
  77. </body>
  78. </html>

变换成箭头：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         * {
  7.             margin:0;
  8.             padding:0;
  9.         }
  10.         .arrow_div {
  11.             width: 100px;
  12.             height: 100px;
  13.             background: #000;
  14.             position: relative;
  15.         }
  16.         .arrow {
  17.             width: 33px;
  18.             height: 4px;
  19.             display: inline-block;
  20.             background: #fff;
  21.             position: absolute;
  22.             left:0;
  23.             right:0;
  24.         }
  25.  
  26.         .arrow_body {
  27.             margin: auto;
  28.             top:40px;
  29.             -webkit-animation: 2s linear body_kf infinite;
  30.         }
  31.  
  32.         @-webkit-keyframes body_kf {
  33.             0% {
  34.  
  35.             }
  36.             30%, 50% {
  37.                 -webkit-transform: rotate(180deg);
  38.             }
  39.             80%, 100% {
  40.                 -webkit-transform: rotate(360deg);
  41.             }
  42.  
  43.         }
  44.  
  45.         .sleft {
  46.             width: 33px;
  47.             height: 33px;
  48.             border: transparent;
  49.             position: absolute;
  50.             top: 25px;
  51.             margin: 0 auto;
  52.             left: 0;
  53.             right: 0;
  54.             -webkit-animation: 2s linear sleft_kf infinite;
  55.         }
  56.         .sleft:before {
  57.             content: '';
  58.             width: 33px;
  59.             height: 4px;
  60.             display: inline-block;
  61.             background: #fff;
  62.             top: 0;
  63.             position: absolute;
  64.             -webkit-animation: 2s linear sleft_before_kf infinite;
  65.         }
  66.         @-webkit-keyframes sleft_kf {
  67.             0% {}
  68.             30%, 50% {
  69.                 -webkit-transform: rotate(222deg);
  70.             }
  71.             80%,100% {
  72.                 -webkit-transform: rotate(360deg);
  73.             }
  74.         }
  75.         @-webkit-keyframes sleft_before_kf {
  76.             0%, 100%{}
  77.             20% {
  78.                 width: 28px;
  79.                 top: 1px;
  80.                 left: 3px;
  81.             }
  82.             25% {
  83.                 width: 26px;
  84.                 top: 2px;
  85.                 left: 6px;
  86.             }
  87.             30%, 40%, 50% {
  88.                 width: 22px;
  89.                 top: 3px;
  90.                 left: 8px;
  91.             }
  92.             80% {
  93.                 width: 33px;
  94.                 top:0;
  95.                 left:0;
  96.             }
  97.         }
  98.         .sright {
  99.             width: 33px;
  100.             height: 33px;
  101.             border: transparent;
  102.             position: absolute;
  103.             margin: 0 auto;
  104.             left: 0;
  105.             right: 0;
  106.             top: 25px;
  107.             position: absolute;
  108.             -webkit-animation: 2s linear sright_kf infinite;
  109.  
  110.         }
  111.  
  112.         .sright:before {
  113.             content: '';
  114.             width: 33px;
  115.             height: 4px;
  116.             display: inline-block;
  117.             background: #fff;
  118.             bottom: 0;
  119.             position: absolute;
  120.             -webkit-animation: 2s linear sright_before_kf infinite;
  121.         }
  122.         @-webkit-keyframes sright_kf {
  123.             0% {}
  124.             30%, 50% {
  125.                 -webkit-transform: rotate(135deg);
  126.             }
  127.             80%,100% {
  128.                 -webkit-transform: rotate(360deg);
  129.             }
  130.         }
  131.         @-webkit-keyframes sright_before_kf {
  132.             0%,100% {}
  133.             20% {
  134.                 width: 28px;
  135.                 bottom: 1px;
  136.                 right: 1px;
  137.             }
  138.             25% {
  139.                 width: 25px;
  140.                 bottom: 2px;
  141.                 right: 2px;
  142.             }
  143.             30%, 40%, 50% {
  144.                 width: 22px;
  145.                 bottom: 3px;
  146.                 right: 3px;
  147.             }
  148.  
  149.             80% {
  150.                 width: 33px;
  151.                 bottom: 0;
  152.                 right:0;
  153.             }
  154.         }
  155.  
  156.     </style>
  157. </head>
  158. <body>
  159.     <div class="arrow_div">
  160.         <div class="sleft"></div>
  161.         <i class="arrow arrow_body"></i>
  162.         <div class="sright"></div>
  163.     </div>
  164. </body>
  165. </html>

30分钟玩转css3动画， transition，animation的更多相关文章

  1. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  2. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  3. CSS3动画属性animation的用法

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

  4. 学习笔记之Linux Shell脚本教程：30分钟玩转Shell脚本编程

    Linux Shell脚本教程:30分钟玩转Shell脚本编程 http://c.biancheng.net/cpp/shell/

  5. CSS3动画以及animation事件

    1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...

  6. CSS3(transform/transition/animation) 基础 总结

    1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...

  7. 学习CSS3动画（animation）

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

  8. css3 tranform  transition animation

    tranform:对象图形变形 tranform的属性包括:   1.none 表示不进行变换:   2.rotate 旋转            transform:rotate(20deg) 旋转 ...

  9. CSS3 动画实现 animation 和 transition 比较

    在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...

随机推荐

  1. 【洛谷5309】[Ynoi2012] D1T1（分块）

    点此看题面 大致题意: 两种操作,区间求和,将形如\(ax+y\)的位置的元素值加\(z\). 分块 这种题目显然就是按照\(x\)与\(\sqrt n\)的大小关系来分块. 对于\(x>\sq ...

  2. LA 3353 最优巴士线路设计

    给出一个 n 个点的有向图,找若干个圈,是的每个结点恰好属于一个圈.要求总长度尽量小. 三倍经验题 Uva 12264,HDU 1853 这题有两种解法,一是匹配: 每个点只在一个圈中,则他有唯一的前 ...

  3. echarts图表与可视窗口的自适应

    由于要适应屏幕尺寸,发现了这个问题.网上搜到了两个办法,如下: 方法一: window.onresize = mychart.resize; 方法二: window.addEventListener( ...

  4. NW.js开发环境的搭建

    写在前面: 之前一直在找关于在mac怎么搭建nw.js的开发环境,苦于自己也没有很深入的理解,其实看看官方文档就差不多知道mac下要怎么整了. 官方文档的图: 正题开始: 先去下载一个nw.js的安装 ...

  5. 解决 Database Configuration Assistannt安装oracle实例使的 警告

    在创建到85%的时候报错,错误如下: 解决办法: 经过查看警告中给出的日志文件F:\develop\oracle_data\app\Administrator\cfgtoollogs\dbca\tes ...

  6. 【luogu P2880 [USACO07JAN]平衡的阵容Balanced Lineup】 题解

    题目链接:https://www.luogu.org/problemnew/show/P2880 是你逼我用ST表的啊qaq #include <cstdio> #include < ...

  7. Entity Framework5.0运行时错误ObjectStateManager 中已存在具有同一键的对象

    EF写了个简单的框架,在把查询出来的数据修改回去时,报了ObjectStateManager 中已存在具有同一键的对象这样一个错误,寻寻觅觅终于找到了最终的解决方案. ObjectStateManag ...

  8. android中cursor对象的使用

    cursor对象是使用行来存储数据的,你要使用它获得数据,就必须知道每一列的数据名称以及他的数据类型才能获得对象数据 常见的方法: .close()关闭资源:记住,所有的资源对象使用完成后都要主动关闭 ...

  9. 在react中实现CSS模块化

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了.下面我将简 ...

  10. 课时59.体验css（理解）

    我们想做这样一个样式,应该怎么做? 分析: 有一个标题(h1),还有一些段落(p) 标题是居中的,段落也是居中的,所以我们可以设置h标签和p标签居的align属性等于center来实现 标题和段落都有 ...