css点击控制动画暂停播放
css点击控制动画暂停播放
流眸
发布于 2021-06-16 11:40:14
发布于 2021-06-16 11:40:14
代码可运行
文章被收录于专栏：前端技术分享|前沿资讯|读书分享
运行总次数：0
代码可运行
前言
水杯注水动画示例
当前好多使用到css动画的场景，并且需要鼠标控制动画的播放或暂停，如上图所示，点击水龙头时出水，松开鼠标停止出水，保持停止时的状态。接下来要介绍的便是一种脱离JS，使用纯CSS属性来写动画并控制播放暂停。
实现
1. 本案例效果
本案例效果
2. 需求描述
- 动画默认暂停状态；
- 鼠标按下，动画开始；鼠标松开，动画暂停；
- 鼠标再次按下，从上一帧暂停处继续完成动画，松开再次暂停；
- 动画完成后状态停留在完成帧，且无论点击与否都不再播放动画。
3. 实现步骤
3.1 基础布局
<div class="bollbox">
<div class="boll"></div>
</div>
.bollbox{
border-bottom: 3px solid #ccc;
border-right: 3px solid #ccc;
width: 450px;
}
.boll {
margin: 30px 0 0;
width: 150px;
height: 150px;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
border-radius: 50%;
}
3.2 添加动画
在CSS中添加动画
.bollbox{
border-bottom: 3px solid #ccc;
border-right: 3px solid #ccc;
width: 450px;
}
.boll {
margin: 30px 0 0;
width: 150px;
height: 150px;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
border-radius: 50%;
+ animation: run 1s linear; // run动画，1秒，匀速
+ animation-fill-mode: forwards; // 状态停留在最后一帧
}
+ @keyframes run {
+ to{
+ transform: translateX(300px) rotate(360deg);
+ }
+ }
此时小球动了起来，效果如下：
3.3 添加按钮控制
<div class="bollbox">
+ <button type="button" class="btn">按住开始，松开停止</button>
<div class="boll"></div>
</div>
.bollbox{
border-bottom: 3px solid #ccc;
border-right: 3px solid #ccc;
width: 450px;
}
.boll {
margin: 30px 0 0;
width: 150px;
height: 150px;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
border-radius: 50%;
animation: run 1s linear;
animation-fill-mode: forwards;
+ animation-play-state: paused; // 起始状态，暂停
}
@keyframes run {
to{
transform: translateX(300px) rotate(540deg);
}
}
+ .btn:active +div{ // 激活状态下，执行动画
+ animation-play-state: running;
+ }
OK，此时便完成了本案例。
小结
本案例主要用到了CSS3的几个动画属性，如animation-play-state、animation-fill-mode等，合理的运用这些简单的CSS便可以完成一些有意思的效果，下期再见。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-05-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
