css3动画(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]-css3动画(css3动画属性有哪些)-小白之家

属性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>

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论