让知识连接你我
投稿赚钱
当前位置: 首页 > 前端开发 > css动画是可以暂停的
  • 101
  • 微信分享

    扫一扫,在手机上查看

css动画是可以暂停的

2019.09.06 10:00 268 浏览 举报

  css动画大家都不陌生,但是你知道css动画是可暂停的吗?如果你不知道就来看看吧。

  虽然用过很多次animation,但是也就前几天才知道动画是可以暂停的,可见自己对动画的了解还是不够深,一起来学习一下今天的主角—animation-play-state(running | paused)

  html代码:

  <div class="play-state">
  暂停
  </div>

  css代码:

  .play-state {
  width: 100px;
  height: 100px;
  margin: 40px;
  text-align: center;
  line-height: 94px;
  border: 3px solid #e1efde;
  border-radius: 50%;
  animation: play-state 3s linear infinite;
  cursor: pointer;
  }
  .play-state:hover {
  animation-play-state: paused;
  }
  @keyframes play-state {
  0% {
  margin-left: 0;
  }
  100% {
  margin-left: 200px;
  }
  }

  该属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放。其中恢复已暂停的动画,是从它暂停的时候,而不是从动画的起点。


本文首次发布于开创者素材 ,转载请注明出处,谢谢合作!

相关文章推荐