创建动画
执行动画
案例
其实很简单,创建个动画,然后设置动画进行到百分多少是什么样式,添加透明度,高宽等等都可以。
然后执行动画。
<!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>
@keyframes myAnim {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: red;
}
}
div {
width: 200px;
height: 200px;
background-color: red;
/* linear:这是一个动画的时间函数(timing-function),
表示动画的进度是均匀的。
换句话说,动画的速度在整个过程中保持一致,
不会加速或减速 */
animation: myAnim 2s linear infinite;
/* Ensures animation repeats indefinitely */
}
div:hover {
animation-play-state: paused;
/* Pause animation on hover */
}
</style>
</head>
<body>
<div></div>
</body>
</html>