3D动画(CSS3)-animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果；
通过CSS3，我们能够创建动画，这可以在许多页面中取代
动画图片、Flash动画以及JavaScript。
第一种叫过渡（transition）动画，就是从初始状态过渡
到结束状态这个过程中所产生的动画。所谓的状态就是指
大小、位置、颜色、变形(transform)等这些属性。CCS过
渡只能定义首和尾这两个状态，所以是最简单的一种动画
。
第二种叫做关键帧（keyframes）动画。不同于第一种的
过渡动画只能定义首尾两个状态，关键帧动画可以定义多
个状态，或者用关键帧来说的话，过渡动画只能定义第一
帧和最后一帧这两个关键帧，而关键帧动画则可以定义任
意多的关键帧，因而能实现更复杂的动画效果。
通过@keyframes规则，您能够创建动画。
创建动画的原理是，将一套CCS样式逐渐变化为另一套样
式。在动画过程中，您能够多次改变这套CSS样式。
以百分比来规定改变发生的时间，或者通过关键词“from
”和"to"，等价于0%和100%.0%是动画的开始时间，100%
动画的结束时间。为了获得最佳的浏览器支持，你应该始
终定义0%和100%选择器。、
当在@keyframes中创建动画时，请把它捆绑到某个选择器
，否则不会产生动画效果。
通过规定至少以下两项CSS3动画属性，即可将动画绑定到
选择器；规定动画的名称；规定动画的时长。
语法：
@keyframes animationname
{
keyframes-selector{css-styles;}
}
说明：
animationname:声明动画的名称；
keyframes-selector:用来划分动画的时长，可以使用百
分比形式，也可以使用"from"和"to"的形式。
“from”和“to”的形式等价于0%与100%。
建议始终使用百分比形式。
语法：
animation-timing-function:value;
说明：
animation-timing-function规定动画的速度曲线；
linear:动画从头到尾的速度是相同的。
ease:默认。动画以低速开始，然后加快，在结束前变慢
ease-in:动画以低速开始。
ease-out:动画以低速结束。
ease-in-out:动画以低速开始和结束。
cubic-bezier(n,n,n,n):在cubic-bezier函数填值，可能
的值是从0到1的数值。
语法：
animation-iteration-count:n|infinite;
说明：
animation-iteration-count属性定义动画的播放次数。
n:定义动画播放次数的数值。
infinite:规定动画应该无限次播放。
语法：
animation-play-state:paused|running;
说明：
animation-play-state属性规定动画正在运行还是暂停。
注释：可以在JavaScript中使用该属性，这样就能在播放
过程中暂停动画。
paused:规定动画已经暂停。
running:规定动画正在播放。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 50px;
height: 50px;
background-color: green;
animation: anim-test 4s;
}
@keyframes anim-test {
0% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(200px,0,0);
}
50% {
transform: translate3d(200px,200px,0);
}
75% {
transform: translate3d(0px,200px,0);
}
100% {
transform: translate3d(0,0,0);
}
}
div:hover {
animation-play-state: paused; /*鼠标经过暂停动画*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>效果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
