animation:动画
章晗日
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>回忆录</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div></div>
</body>
<script>
</script>
</html>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: #6666FF;
position: absolute;
/* animation: run 3s, color-change 3s; */
/*注意:可以将多个关键帧写在一起*/
animation: run 3s ease-in 1s 1 normal both;
/*
第一个值run：代表动画的名称
第二个值3s：代表执行完动画需要花费多久的时间
第三个值ease-in：代表运动的速度（每一段的）（默认值==ease：平滑过渡）
第四个值1s：代表运动前延迟的时间（默认值==0）
第五个值1：代表运动几次（infinite：无线循环）
第六个值normal：代表运动方向（默认值==normal）
第七个值backwards：代表运动的状态
（默认值==none,
backwards运动开始前的状态为#6666FF，结束后也为#6666FF）
forwards运动结束前最后一帧的状态为#ff0000，结束后也为#ff0000）
*/
}
div:hover {
animation-play-state: paused;
/*停止运动：兼容性不好，不推荐使用*/
}
@keyframes run {
0% {
/*注意：0% == from */
left: 0;
top: 0;
background-color: #ff0000;
}
25% {
left: 200px;
top: 0;
background-color: #ff0000;
}
50% {
left: 200px;
top: 200px;
background-color: #ff0000;
}
75% {
left: 0;
top: 200px;
background-color: #ff0000;
}
100% {
/* 100% == to */
left: 0;
top: 0;
background-color: #ff0000;
}
}
/*
举例子：0% == from 100% == to ,run与run1效果一样的。
@keyframes run1{
from{
left: 0;
top: 0;
}
25%{
left: 200px;
top:0;
}
50%{
left: 200px;
top:200px;
}
75%{
left: 0;
top:200px;
}
to{
left: 0;
top:0;
}
}
*/
/*一边移动一边改变颜色：*/
@keyframes color-change {
from {
/* left: 0;
top: 0; */
background-color: #ff0000;
}
25% {
/* left: 200px;
top:0; */
background-color: #FFFF00;
}
50% {
/* left: 200px;
top:200px; */
background-color: #0000ff;
}
75% {
/* left: 0;
top:200px; */
background-color: #00FF00;
}
to {
/* left: 0;
top:0; */
background-color: #000000;
}
}
/*
关键帧存在兼容性问题，为了解决这个问题，
是使用关键帧时一定要加进行兼容性处理。
@keyframes run {
0% {
left: 0;
top: 0;
}
25% {
left: 200px;
top: 0;
}
50% {
left: 200px;
top: 200px;
}
75% {
left: 0;
top: 200px;
}
100% {
left: 0;
top: 0;
}
}
@-webkit-keyframes run {
0% {
left: 0;
top: 0;
}
25% {
left: 200px;
top: 0;
}
50% {
left: 200px;
top: 200px;
}
75% {
left: 0;
top: 200px;
}
100% {
left: 0;
top: 0;
}
}
@-moz-keyframes run {
0% {
left: 0;
top: 0;
}
25% {
left: 200px;
top: 0;
}
50% {
left: 200px;
top: 200px;
}
75% {
left: 0;
top: 200px;
}
100% {
left: 0;
top: 0;
}
}
*/
类似资料：