CSS3动画属性有哪些

css3动画：animation特点：不需要事件触发，调用“关键帧”即可。关键帧：计算机动画术语，帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。

css3动画：animation

特点：不需要事件触发，调用“关键帧”即可。

关键帧：计算机动画术语，帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。

制定关键帧

第一种写法：

@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: 0 auto;

position: relative;

}

h2{ width: 100px;

height: 100px;

background: green;

position: absolute;

animation: h2late 5s infinite linear;

}

@keyframes h2late{

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; }

}

格式：

<body>

</div>

</body>

这样就可以在页面中呈现一个移动的小格子了。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验

关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-09-23 09:06
阅读 ( 334 )

CSS3动画属性有哪些

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »