CSS3动画

时间：2016-12-02 09:47:02 阅读：925 评论：0 收藏：0 [点我收藏+]

标签：from 示例 image 16px infinite tle 空间 ima name

移动端的开发也有这种hack，来解决可能的卡顿问题：

css-webkit-transform: translate3d(0, 0, 0);

css3动画大致分三类：

1.变形

说明

transform属性能对元素对象进行变形操作，主要包括以下几种：旋转rotate、缩放scale、移动translate、倾斜skew以及矩阵变形matrix。

取值

none:表示不进行变换；

<transform-function>:表示一个或多个变换函数，以空格分开，因此可以同时对一个元素进行transform的多种属性操作。

1.rotate(<angle>):旋转元素
2.scale(<number>[, <number>]):缩放元素
3.translate(<translation-value>[, <translation-value>]):移动元素
4.skew(<angle> [,<angle>]):倾斜元素
5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩阵变形
6.perspective(length):透视

示例：transform:rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);

实例代码:

css

.demo_rotate{
-webkit-transition:1s ease all;
-moz-transition:1s ease all;
padding:10px;
margin:90px auto;
}
.demo_rotate:hover{
-webkit-transform:rotate(360deg) scale(1.2,1.2);
-moz-transform:rotate(360deg) scale(1.2,1.2);
background:#ff9900;
}

HTML

<div class="demo_box demo_rotate">鼠标经过变大1.2倍、旋转360度并改变背景色。</div>

效果预览：http://runjs.cn/code/tom5me9d

2.过渡

transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。http://www.w3.org/TR/css3-transitions/

transition可以和Transform同时使用。

transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。

实例代码

CSS

.transition_property_1{
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -webkit-transition-property:all;
    -moz-transition-property:all;
    position:absolute;
    left:10px;
    top:50px;
}
.transition_property_2{
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -webkit-transition-property:none;
    -moz-transition-property:none;
    position:absolute;
    left:250px;
    top:50px;
}
.transition_property_3{
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -webkit-transition-property:width;
    -moz-transition-property:width;
    position:absolute;
    left:480px;
    top:50px;
}

.transition_property_1:hover,
.transition_property_2:hover,
.transition_property_3:hover{
    width:500px;
    height:300px;
}

<div class="demo_box transition_property_1">变换所有的属性</div>
<div class="demo_box transition_property_2">不变换任何属性</div>
<div class="demo_box transition_property_3">只变换宽度属性</div>

效果预览：http://runjs.cn/detail/s3k5rfg0

3.动画

说明

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义如果提供多个属性值，以逗号进行分隔。

如何开始进行动画

@keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name，那么就可以执行动画了。定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：如：

@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}

复杂动画：

@-webkit-keyframes demo{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

这里面的百分百有点像flash里帧的概念。表示设置某个时间段内任意时间点的样式。

实例代码

CSS

.animation_name{
    left:0;
    top:100px;
    position:absolute;
    -webkit-animation:0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation:0.5s 0.5s ease infinite alternate;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    0%{left:0;}
    100%{left:400px;}
}

HTML

<div class="demo_box animation_name">看我没事来回跑</div>

预览下效果：http://runjs.cn/code/uajpxech

关联属性

说明

transform的参照点默认为元素的中心点，如果要改变这个参照点，可以是用transform-origin属性进行自定义。

受影响变形函数：rotate()。

.origin_1{
    -webkit-transform-origin:center center;
    -moz-transform-origin:center center;
    -webkit-transition:0.5s ease all;
    -moz-transition:0.5s ease all;
    position:absolute;
    left:10px;
    top:50px;
}
.origin_2{
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    -webkit-transition:0.5s ease all;
    -moz-transition:0.5s ease all;
    position:absolute;
    left:250px;
    top:50px;
}
.origin_3{
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -webkit-transition:0.5s ease all;
    -moz-transition:0.5s ease all;
    position:absolute;
    left:480px;
    top:50px;
}
.origin_4{
    -webkit-transform-origin:20px 60px;
    -moz-transform-origin:20px 60px;
    -webkit-transition:0.5s ease all;
    -moz-transition:0.5s ease all;
    position:absolute;
    left:250px;
    top:160px;
}
.origin_1:hover,
.origin_2:hover,
.origin_3:hover,
.origin_4:hover{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
}

HTML

<div class="demo_box origin_1">在中心点旋转45度</div>
<div class="demo_box origin_2">在左上角旋转45度</div>
<div class="demo_box origin_3">用百分百值来来设置旋转点旋转45度</div>
<div class="demo_box origin_4">用长度值来设置旋转点旋转45度</div>