css动画

阅读目录

• 　　　　　css3中与动画相关的标签 　　
  　　　　
  • 　　　　　　animation 　　　　

  　　　　

  • 　　　　　　transition 　　　　

  　　　　

  • 　　　　　　与动画无关的transform 　　　　

  　　　　

• 浏览器兼容

css3中与动画相关的标签

1.animation标签

不同浏览器的动画属性前缀如表中所示( @-pre-keyframes 以及 下面所列 animation 相关的几个属性都用到这几个前缀)，其中IE9及以前的版本均不支持 @keyframe 规则或 animation 属性。

属性	浏览器支持
@keyframes	10+
animation	10+

“动画的整个过程”：

css3动画的过程是用 @keyframes 来描述的，分别以百分比来标识不同时态的元素属性：

@-pre-keyframes 自定过程名{
　　0%: {style}        /*必需*/
　　20%: {style}
　　……
　　100%: {style}    /*必需*/
}

在元素属性中绑定动画 并 设置动画属性：

属性	描述
-pre-animation	所有动画属性的简写属性，除了 animation-play-state 属性。
-pre-animation-name	规定 @keyframes 动画的名称。
-pre-animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
-pre-animation-timing-function	规定动画的速度曲线。默认是 "ease"。
-pre-animation-delay	规定动画何时开始。默认是 0。
-pre-animation-iteration-count	规定动画被播放的次数。默认是 1。
-pre-animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
-pre-animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。
-pre-animation-fill-mode	规定对象动画时间之外的状态。

简写形式为

-pre-animation: keyframe duration function delay count derection

2.transition标签

首先说一下 transition 标签 animation标签的不同。transition 标签定义的是当元素的指定属性有变化时，以该属性标识的方式进行过渡。比如说：指定高度变化时激活本动画，本来高200px， 用户或者开发者把它变成了高 300px，那么这个高度的变化不会立即生效，而是按照 transition 定义的方式进行变化成 300px。

IE 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。

IE	Firefox	Chrome	Safari	Opera
10+

详细属性如下：

值

描述

transition-property

规定设置过渡效果的 CSS 属性的名称。

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

transition-duration

规定完成过渡效果需要多少秒或毫秒。

transition-timing-function

规定速度效果的速度曲线。

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay

定义过渡效果何时开始。

可以简写成以下形式：

transition: property duration timing-function delay;

3.再介绍一个与动画无关的值-- transform

transform本身并不能产生动画，只是使得直上直下的平面元素产生了平面或三维的变形。之所以放在这里一起说明，是因为许多动画的关键帧中都会用到这一变换。

IE9	IE10	Opera	Chrome	Safari	Firefox
-ms- 只支持2D	无前缀 3D	-o- 2D	-webkit- 3D	-webkit- 3D	-moz- 3D

2D转换只是平面的转换，比如在平面上旋转、位置等。而3D转换则又包括透视、翻转等等。

具体用法为：

transform: none 或者 类型;

下面给出转换类型的列表：

值	描述	测试
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。

浏览器兼容问题

最近写了个轻画册的小页面，IE、Chrome、Firefox、Safari、Opera所有动画效果都能照预期的展现出来，惟独360没有动画。本来一直认为360底层用的应该是和IE的一样的。后来发现360有3种不同的模式，分别是：极速模式、兼容模式和 IE标准模式。3个模式下对应的内核分别为 Webkit内核、IE兼容的的Trident老内核、IE9+采用的新内核。而第二种Trident内核是国内许多兼容浏览器所采用的内核，兼容​问题较少（最终展现）但对HTML和CSS3等支持非常不好。所以最终问题就是：如何让360打开我们的页面时自动选择极速模式或者IE标准模式？

360官方给出了这样的解决方案：

若页面需默认用极速核，增加标签：<meta name=”renderer” content=”webkit” /> 
若页面需默认用ie兼容内核，增加标签：<meta name=”renderer” content=”ie-comp” /> 
若页面需默认用ie标准内核，增加标签：<meta name=”renderer” content=”ie-stand” />