计算机动画术语,帧——就是动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标志。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画能够由软件来创立,叫做过渡帧或者中间帧。
制定关键帧
第一种写法:
@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>
Tips:本站所有资源均收集自互联网,分享目的仅供学习参考,资源版权归该资源的合法拥有者所有。
Tips:若本站所发布的资源侵犯到您的合法权益,请及时联系 hqteam@qq.com 删除!
暂无评论内容