@keyframes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@keyframes</title>
<style>
.box{
width: 100px;
height: 100px;
background:red;
animation-name: slidein;
animation-duration: 4s;
animation-delay: 0.5s;
}
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
@keyframes语法, 查看更多：
@keyframes yourname {
from {
}
to {
}
}
这里的from等价于0%, to等价于100%
@keyframes yourname {
0% {
}
100% {
}
}