css动画
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 属性的名称。
|
||||||||||||||
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 | ||||||||||||||
transition-timing-function | 规定速度效果的速度曲线。
|
||||||||||||||
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” />