css动画之@keyframes

Posted 2021-12-23 算法与编程之美

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css动画之@keyframes相关的知识，希望对你有一定的参考价值。

1 前言

在css中我们可以利用@keyframes创建动画效果，在过程中还可更改css样式。

2 方法

先在position进行定位，animation设置动画运行的时长，infinite表示动画循环。在@keyframes中，比如0%，指在这个时间所处的位置，用top和left进行位置设置，可以利用这个“%”来调整动画的速度。若想对动画中的盒子进行更多的颜色样式设置，在对应的“%”后加上background即可。

3 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box
width: 500px;
height: 500px;
border: 4px solid red;
margin: 100px auto;
position: relative;

#box div
width: 100px;
height: 100px;
background: #000000;
position: absolute;
left: 0;
top: 0;
/*transition: 1s;
*/animation: 4s grape ease infinite;

@keyframes grape
0%
left: 0;
top: 0;

25%
left: 400px;
top: 0px;

50%
left: 400px;
top: 400px;

75%
left: 0;
top: 400px;

100%
left: 0;
top: 0;

/* #box:hover div
left: 400px;
top: 400px;
*/
</style>
</head>
<body>
<div id="box">
<div></div>
</div>
</body>
</html>

4 结语

本次只展示了一个路径较为简单的基础动画，在之后的学习中，将会制作更为有趣的路径动画。在实现css动画时，要注意多加应用。

实习编辑：王晓姣

稿件来源：深度学习与文旅应用实验室（DLETA）

以上是关于css动画之@keyframes的主要内容，如果未能解决你的问题，请参考以下文章