CSS3 动画体验 自动播放动画(animation,@keyframes)
程序员文章站
2024-03-25 12:51:04
...
demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 250px;
height: 250px;
margin: 100px auto;
background-color: red;
animation: am1 2s linear infinite alternate 1s; /* 动画持续时间 匀速 运动次数(循环) alternate(往返运动) 1s(延迟)*/
/* 详细属性 */
animation-name: am1; /* 动画名称 */
animation-duration: 2s; /* 动画持续时间 */
animation-iteration-count: 3; /* 动画次数 infinite:无限播放 */
animation-direction: alternate; /* 往返运动 */
animation-delay: 1s; /* 延迟时间 */
animation-fill-mode: forwards; /* 动画结束后的状态(位置) forwards(结束时的状态) backwards(开始时的状态(默认)) */
animation-timing-function: linear; /* 播放速度 linear:匀速 ease-in-out:先加速后减速 ease-in ease-out */
animation-timing-function: steps(3); /* 整个动画分3个画面(3帧) */
}
.box:hover {
animation-play-state: paused; /* 动画状态 paused(暂停) running(播放) */
}
@keyframes am1 {
0% { /* 或者写成这样: from {} */
width: 250px;
height: 250px; /* 多个属性相当于多组动画一起执行 */
}
100% { /* 或者写成这样: to {} */
width: 500px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> 推荐阅读