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动画时，要注意多加应用。