核心提示：使用css自定义动画，使用到了css3中的属性，所以为了处理浏览器的兼容性问题，要记得加上私有前缀，在此我没有添加，主要使用到的属性有keyframes以及animation属性，keyframes是...
使用css自定义动画，使用到了css3中的属性，所以为了处理浏览器的兼容性问题，要记得加上私有前缀，在此我没有添加，主要使用到的属性有keyframes以及animation属性，keyframes是自己定义一个自己想要的动画，animation是让动画与执行动画的元素关联起来。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: run 3s infinite;
}
@keyframes run {
0% {
left: 0;
top: 0;
background: red;
}
25% {
left: 500px;
top: 0;
background: yellow;
}
50% {
left: 500px;
top: 600px;
background: blue;
}
75% {
left: 0;
top: 600px;
background: green;
}
100% {
left: 0;
top: 0;
background: pink;
}
}
</style>
</head>
<body>
<p>1</p>
</body>
</html>
