CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题。 
一、动画属性: 
动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 
以下是各属性详解: 
1、animation-name:指定要绑定到选择器的关键帧的名称。 
2、animation-duration:定义动画完成一个周期需要多少秒或毫秒 
3、animation-timing-function:指定动画将如何完成一个周期。

说明
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
step-start 在变化过程中,都是以下一帧的显示效果来填充间隔动画
step-end 在变化过程中,都是以上一帧的显示效果来填充间隔动画
steps() 可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数来决定显示效果。第二个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中判断显示效果。

3.1 cubic-bezier(n,n,n,n)称为三次贝塞尔曲线,速度曲线。 
3.1.1 cubic-bezier(n,n,n,n)曲线定制网站地址:http://cubic-bezier.com/#.23,.66,.76,.52 
3.1.2 小球落地又弹起demo地址:http://codepen.io/aSuncat/pen/gwLBWz 
我不知道这个cubic-bezier曲线是怎么算出来的,难道是要靠自己试出来的嘛,不知道有没有人知道怎么算出来的。??? 
3.2 不同值之间差异demo地址(4个方块背景颜色变化):http://codepen.io/aSuncat/pen/JRRzax 
demo解析:①step-start:20%(background: green;)到60%(background: blue;)之间,显示的是60%的效果(background: blue;) 
②step-end:与step-start相反,20%(background: green;)到60%(background: blue;)之间,显示的是20%的效果(background: green;) 
③steps(1, start) 等于step-start,steps(1,end)等于step-end 
④steps函数的工作机制: 
 
4、animation-delay:属性定义动画什么时候开始。 
4.1 单位可以是秒(s)或毫秒(ms)。 
4.2 单位可以是负值,-2s表示动画立马开始,但跳过 2 秒进入动画,即前2秒的动画不执行,直接跳过前2秒进入动画。 
4.2.1 类似音波的加载效果demo地址:http://codepen.io/aSuncat/pen/ALLNpE 
demo解析:①设置同样的动画,通过animation为负值来实现不同时间段的线条的长度。 
②效果示意:
一次动画1.2s,分解为12个阶段,每个阶段0.1秒。每个阶段的第3秒线拉长。 
line1是从0进入动画。 
line2是跳过前11个阶段,即直接从11进入动画。 
依次类推… 
③写5个div时,连着写,然后自己设置margin,一方面避免代码压缩后各线条之间没有空隙,另一方面避免自己不知道5根线的总宽度。 
4.2.2 京东全民寻宝demo地址:http://codepen.io/aSuncat/pen/WGoZGm 
demo解析:①如果没有steps(8),图片会从第一行字直接跳到最后一行,中间的6行不会出现。 
5、animation-iteration-count :定义动画应该播放多少次。

说明
n 一个数字,定义应该播放多少次动画
infinite 指定动画应该播放无限次(永远)

6、animation-direction:定义是否循环交替反向播放动画。

说明
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。
alternate-reverse 动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

6.1 如果动画被设置为只播放一次,该属性将不起作用。 
6.2 动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性可以重写该行为。 
7、animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

说明
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时)。
both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

7.1 默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。 
7.2 forwads表示让动画停留在结束状态,即停留在最后一帧。 
7.3 backwords: 
7.3.1 当 animation-direction 为 “normal” 或 “alternate” 时,回到第一帧。 
7.3.2 当 animation-direction 为 “reverse” 或 “alternate-reverse” 时,停留在最后一帧。 
8、animation-play-state:指定动画是否正在运行或已暂停。

说明
paused 指定暂停动画。
running 指定正在运行的动画。

8.1 在JavaScript中使用此属性在一个周期中暂停动画。 
8.2 线条鼠标悬停开始动画demo地址:http://codepen.io/aSuncat/pen/BLLbko 
二、动画相关 
1、animation的简写(即上述属性的介绍顺序)

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • 1
  • 1

具体化可以记成一下形式:

animation:myAnim 1s linear 1s infinite alternate both running;
  • 1
  • 1

2、keyframes:定义动画规则,关键帧。

说明
animationname 必需的。定义animation的名称。
keyframes-selector 必需的。动画持续时间的百分比。
css-styles 必需的。一个或多个合法的CSS样式属性

2.1 写法自由 
2.1.1 指定的变化时发生时使用%,或关键字”from”和”to”,这是和0%到100%相同。以下两段代码效果相同。

@keyframes myAnim{
from { background: #f00; }
50% { background: #0f0; }
to { background: yellowgreen; }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
@keyframes myAnim{
0% { background: #f00; }
50% { background: #0f0; }
100% { background: yellowgreen; }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

2.1.2 如果省略某个状态,浏览器会自动推算中间状态。但是,为了获得最佳的浏览器支持,应该始终定义0%和100%的选择器。

@keyframes rainbow {
50% { background: orange }
to { background: yellowgreen }
} @keyframes rainbow {
to { background: yellowgreen }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2.1.3 可以将多个状态写在一行。

@keyframes myAnim{
0%,100% { background: #f00; }
50% { background: #0f0;
}
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

3、浏览器前缀 
IE 10和Firefox(>= 16)支持没有前缀的animation,firefox(<16)使用-moz-前缀,因为现在firefox的版本也都不低,所以firefox都直接使用没有前缀的animation。 
而chrome,safari,opera不支持,所以必须使用webkit前缀。 
使用示例如下:

div{
animation:myAnim 1s;
-webkit-animation:myAnim 1s;
}
@keyframes myAnim{
0% { background: #f00; }
50% { background: #0f0; }
100% { background: yellowgreen; }
}
@-webkit-keyframes myAnim{
0% { background: #f00; }
50% { background: #0f0; }
100% { background: yellowgreen; }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

4、定义动画时,必须定义动画的名称和动画的持续时间。如果省略持续时间,动画将无法运行,因为默认值是0。

 //http://blog.csdn.net/aSuncat/article/details/52588078

css动画-animation各个属性详解(转)的更多相关文章

  1. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  2. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  3. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...

  4. 转-CSS padding margin border属性详解

    原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...

  5. CSS 不换行 white-space 属性详解

    实例 规定段落中的文本不进行换行: p { white-space: nowrap } 可能的值 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTM ...

  6. 关于css中的align-content属性详解

    align-content 作用: 会设置自由盒内部各个项目在垂直方向排列方式. 条件:必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:r ...

  7. css 12-CSS3属性详解:动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  8. [转]CSS vertical-align属性详解 作者:黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  9. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

随机推荐

  1. Python mac安装mysqlclient的一个bug

    这是一个来自mysql官方的bug,反正我是看不懂. shuais-MBP:wxapp dandyzhang$ pipenv install mysqlclient Installing mysqlc ...

  2. Git入门——本地版本库操作

    作为一个一直用SVN的家伙,深深地感到了自己在版本控制工具上的落伍.... 首先必须强调的是: Git与Github不是一回事. Git是目前世界上最先进的分布式版本控制系统,于2005年被linux ...

  3. django/python日志logging 的配置以及处理

    日志在程序开发中是少不了的,通过日志我们可以分析到错误在什么地方,有什么异常.在生产环境下有很大的用处.在java 开发中通常用 log4j,logback 等三方组件.那么在 django中是怎么处 ...

  4. Python 官方中文教程(简)

    Python 官方教程 前言 这是一次系统学习Python官方教程的学习笔记 整个教程一共16章, 在学习过程中记录自己不知道的和一些重要的知识, 水平有限, 请指正. Python3.7 官方教程. ...

  5. Laravel 生成migration ,boolean字段字段转为tinyInteger

    Schema::create('consults', function (Blueprint $table) { $table->increments('id'); $table->str ...

  6. Bootstrap modal常用参数、方法和事件

    Bootstrap modal(模态窗)常用参数.方法和事件: 参数: 名称 类型 默认值 描述 Backdrop Boolean或字符串“static” True True:有背景,点击modal外 ...

  7. div的onclick事件怎么失效了?

    1 前言 div是用拼接复制到另一个个div上,div的onclick事件中方法名为close,导致onclick=“close()” 触发不了,然后换了名称就可以了 2 代码 <!DOCTYP ...

  8. MariaDB配置、集群

    MariaDB在centos 7.3的安装,配置和集群搭配 阿里云最新选配系统中,只有centos7.3可选,因此,基于centos 7的MariaDB的安装,配置... 全部删除MySQL/Mari ...

  9. 自学华为IoT物联网_07 物联网安全

    点击返回自学华为IoT物流网 自学华为IoT物联网_07 物联网安全 1. 物联网安全的事件 事件1: 特斯拉事件 车载终端被入侵,通过CAN总线命令可远程控制车辆启停: 本地关键信息存储未做保护,印 ...

  10. [转]Web应用防火墙WAF详解

    通过nginx配置文件抵御攻击 0x00 前言 大家好,我们是OpenCDN团队的Twwy.这次我们来讲讲如何通过简单的配置文件来实现nginx防御攻击的效果. 其实很多时候,各种防攻击的思路我们都明 ...