相比过渡,动画可以实现更多变化、更多控制,可以实现自动播放等效果。
动画的基本使用分两步:
1)先定义动画
2)再使用动画,哪个元素使用就在哪个元素上调用动画
定义动画的语法形式:
/* 定义动画 */
/* movetoright是动画的名称 */
@keyframes movetoright {
/* 定义开始状态 */
0% {
transform: translateX(0px);
}
/* 定义结束状态 */
100% {
transform: translateX(1700px);
}
}
使用动画的语法形式:
/* 调用的动画名称 */
animation-name: movetoright;
/* 动画的持续时间 */
animation-duration: 3s;
完整示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 定义动画 */
/* movetoright是动画的名称 */
@keyframes movetoright {
/* 定义开始状态 */
0% {
transform: translateX(0px);
}
/* 定义结束状态 */
100% {
transform: translateX(1700px);
}
}
div {
width: 200px;
height: 200px;
background-color: lightsalmon;
border-radius: 50%;
/* 使用动画 */
/* 调用的动画名称 */
animation-name: movetoright;
/* 动画的持续时间 */
animation-duration: 3s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画开始状态:
动画结束状态: