正文
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 属性的名称。
|
||||||||||||||
| 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” />
