@keyframes:定义一个动画
animation:在HTML元素上应用动画
animation-name | 动画名称 |
---|---|
animation-duration | 动画持续时间 |
animation-timing-function | 动画速度曲线 |
animation-delay | 动画开始的时间,延迟 |
animation-iteration-count | 动画播放次数,默认为1 |
animation-direction | 动画在下一个是否逆向播放,默认为normal,逆向为alternate |
animation-fill-mode | 规定对象动画时间之外的状态 |
使一个div从一个位置移动到另一个位置并变换背景颜色
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
top: 100px;
left: 100px;
animation-name: myframe;
animation-duration: 2s;
}
@keyframes myframe {
from{
top: 100px;
left: 100px;
background-color: black;
}to{
top: 400px;
left: 400px;
background-color: mediumspringgreen;
}
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
使一个div平移一圈
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: black;
animation-name: myframe;
animation-duration: 2s;
animation-iteration-count:infinite;
}
@keyframes myframe {
0%{
}
25%{
margin-left: 400px;
margin-top: 0;
}
50%{
margin-left: 400px;
margin-top: 400px;
}
75%{
margin-top: 400px;
margin-left: 0;
}
100%{
margin-top: 0;
margin-left: 0;
}
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>