纯CSS方式实现CSS动画的暂停与播放!

开发 前端
使用纯 CSS 的方法,能否暂停、播放 CSS 动画?看起来不可能,至少很麻烦。本文介绍代码来实现了纯 CSS 方式实现 CSS 动画的暂停与播放。

纯 CSS 方式实现 CSS 动画的暂停与播放!

使用纯 CSS 的方法,能否暂停、播放 CSS 动画?看起来不可能,至少很麻烦。

我们知道,在 CSS3 animation 中,有这样一个属性可以暂停、播放动画:

  1.  
  2.     animation-play-state: paused | running; 
  3.  

 

animation-play-state: 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放。

如果借助 Javascript,我们可以实现控制 CSS 动画的运行和播放,下面列出部分关键代码:

  1. <div class="btn">stop</div> 
  2.  
  3. <div class="animation"></div> 
  4.  
  5. <style> 
  6.  
  7. .animation { 
  8.  
  9.     animation: move 2s linear infinite alternate; 
  10.  
  11.  
  12. @keyframes move { 
  13.  
  14.     0% { 
  15.  
  16.         transform: translate(-100px, 0); 
  17.  
  18.     } 
  19.  
  20.     100% { 
  21.  
  22.         transform: translate(100px, 0); 
  23.  
  24.     } 
  25.  
  26.  
  27. </style> 

 

 

  1. document.querySelector('.btn').addEventListener('click'function() { 
  2.  
  3.     let btn = document.querySelector('.btn'); 
  4.  
  5.     let elem = document.querySelector('.animation'); 
  6.  
  7.     let state = elem.style['animationPlayState']; 
  8.  
  9.      
  10.  
  11.     if(state === 'paused') { 
  12.  
  13.         elem.style['animationPlayState'] = 'running'
  14.  
  15.         btn.innerText = 'stop'
  16.  
  17.     } else { 
  18.  
  19.         elem.style['animationPlayState'] = 'paused'
  20.  
  21.         btn.innerText = 'play'
  22.  
  23.     } 
  24.  
  25.      
  26.  
  27. }); 

 

Demo — pause CSS Animation(https://codepen.io/Chokcoco/pen/GWYBdM)

纯 CSS 实现

下面我们探讨下,使用纯 CSS 的方式能否实现。

hover 伪类实现

使用 hover 伪类,在鼠标悬停在按钮上面时,控制动画样式的暂停。

关键代码如下:

  1. <div class="btn stop">stop</div> 
  2.  
  3. <div class="animation"></div> 
  4.  
  5. <style> 
  6.  
  7. .stop:hover ~ .animation { 
  8.  
  9.     animation-play-state: paused; 
  10.  
  11.  
  12. </style> 

 

Demo — 纯 CSS 方式实现 CSS 动画的暂停与播放 (Hover):(https://codepen.io/Chokcoco/pen/PpxKBX)

当然,这个方法不够智能,如果释放鼠标的自由,点击一下暂停、再点击一下播放就好了。还有其他方法吗?

checked 伪类实现

之前的文章《有趣的 CSS 题目(8):纯CSS的导航栏Tab切换方案》也谈过,使用 radio 标签的 checked 伪类,加上 实现纯 CSS 捕获点击事情。

并且利用被点击的元素可以控制一些 CSS 样式。实现如下:

  1. <input id="stop" type="radio" name="playAnimation" /> 
  2.  
  3. <input id="play" type="radio" name="playAnimation" /> 
  4.  
  5. <div class="box"
  6.  
  7.     <label for="stop"
  8.  
  9.         <div class="btn">stop</div> 
  10.  
  11.     </label> 
  12.  
  13.     <label for="play"
  14.  
  15.         <div class="btn">play</div> 
  16.  
  17.     </label> 
  18.  
  19. </div> 
  20.  
  21. <div class="animation"></div> 

 

部分关键 CSS 代码:

  1. .animation { 
  2.  
  3.     animation: move 2s linear infinite alternate; 
  4.  
  5.  
  6.   
  7.  
  8. #stop:checked ~ .animation { 
  9.  
  10.     animation-play-state: paused; 
  11.  
  12.  
  13.   
  14.  
  15. #play:checked ~ .animation { 
  16.  
  17.     animation-play-state: running; 
  18.  

 

我们希望当 #stop 和 #play 两个 radio 被点击时,给 .animation 元素分别赋予 animation-play-state: paused 或是 animation-play-state: running 。而且二者只能生效其一,所以需要给两个 radio 标签赋予相同的 name 属性。

DEMO — 纯 CSS 方式实现 CSS 动画的暂停与播放:(https://codepen.io/Chokcoco/pen/QpJwBW)

上面的示例 Demo 中,实现了纯 CSS 方式实现 CSS 动画的暂停与播放。

当然,还有一些其他方法,例如 radio 替换成 checkbox ,或者使用 :target 伪类选择器也能实现上面同样的效果,感兴趣的可以尝试一下。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2022-08-29 17:39:53

应用开发css动画

2023-11-01 08:33:45

CSS动画效果

2022-03-28 08:44:15

css3水波动画

2021-02-09 07:26:38

前端css技术热点

2024-08-29 08:13:58

2021-10-19 22:23:47

CSSBeautiful按钮

2022-09-12 08:31:41

CSS3伪类URI

2021-01-19 12:16:10

CSS前端UI

2022-02-21 07:02:16

CSSbeautiful按钮

2022-08-10 16:08:38

鸿蒙CSS

2020-11-04 13:55:06

CSS密室逃脱前端

2013-04-08 14:07:28

CSS

2024-03-13 08:21:53

冒泡排序动画

2021-01-25 06:37:06

Css前端CSS 特效

2017-05-03 11:30:20

CSS3小黄人动画

2024-07-31 20:38:18

2022-03-16 14:27:49

CSS三角形前端

2024-05-09 00:00:00

CSS标签JavaScript

2015-04-24 10:05:15

HTML+CSS阿童木头像

2023-06-05 09:28:32

CSS渐变
点赞
收藏

51CTO技术栈公众号