css3动画(css3动画属性有哪些)-IT技术网站

css3 动画

计算机动画术语，帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标志。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画能够由软件来创立，叫做过渡帧或者中间帧。
制定关键帧
第一种写法：
@keyframes关键帧称号（自行取）{
from{初始状态}
to{完毕状态}
}
第二种写法：
@keyframes关键帧称号（自行取）{
0%{初始状态}
25%{运转时间到25%的状态}
50%{运转到50%的状态}
75%{运转到75%的状态}
100%{运转到100%的状态}
（里面的数值都是自行分配的！！）
我们先引见一下animation的属性值有哪些、再来导入关键帧。
animation-timiag-fuction（动画的类型）：
cinear、ease、ease-in、step-starty（没有动画的效果，直接跳到下一帧动画的状态！）
animation-name：关键帧的称号。
animation-duration：动画的持续时间。
amimation-timing-function：动画运转的类型（匀速，加速，减速，贝塞尔曲线）
animition-iteration-count：运动的次数。（默许状态下为1次）
属性1：infinite（无限循环）
属性2：reverse（反方向运转）
属性3：alternate（先正常运转再反向运转，持续交替）
属性4：alternate-reverse（先反向运转再正常运转，持续交替）
animation-play-state：
属性1：paused（暂停）
属性2：running（运动）
常用的写法：animation：关键帧称号（空格隔开）动画时间运转类型延迟时间…（中间的属性不分次第！)
简单的运用一下：
style>
*{margin:0;padding:0;
.box{width:400px;
height:400px;
background:pink;
margin:0auto;
position:relative;
}
h2{width:100px;
height:100px;
background:green;
position:absolute;
animation:h2late5sinfinitelinear;
}
@keyframesh2late{undefined
0%{left:0;top:0;}
25%{left:300px;top:0;}
50%{left:300px;top:300px;}
75%{left:0;top:300px;}
100%{left:0;top:0;}
}
格式：
这样就能够在页面中呈现一个挪动的小格子了。

css3动画属性有哪些

css3动画属性：
@keyframes规定动画。
animation所有动画属性的简写属性，除了animation-play-state属性。
animation-name规定@keyframes动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是0。
animation-timing-function规定动画的速度曲线。默认是”ease”。
animation-delay规定动画何时开始。默认是0。
animation-iteration-count规定动画被播放的次数。默认是1。
animation-direction规定动画是否在下一周期逆向地播放。默认是”normal”。
animation-play-state规定动画是否正在运行或暂停。默认是”running”。
animation-fill-mode规定对象动画时间之外的状态。
示例：
<!DOCTYPEhtml>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/*Firefox:*/
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/*SafariandChrome:*/
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/*Opera:*/
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}
@keyframesmyfirst
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
@-moz-keyframesmyfirst/*Firefox*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
@-webkit-keyframesmyfirst/*SafariandChrome*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
@-o-keyframesmyfirst/*Opera*/
{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:200px;top:0px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:0px;top:200px;}
100%{background:red;left:0px;top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在InternetExplorer中无效。</p>
<div></div>
</body>
</html>