因为专注,所以专业
2005 - 2020

css3动画是可以暂停操作的

时间:2020-01-07 20:56:53    作者:八叔模板堂
  css3动画大家都不陌生,但是你知道css3动画是可暂停的吗?如果你不知道就来看看吧。
  虽然用过很多次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;
  }
  }
  该属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放。其中恢复已暂停的动画,是从它暂停的时候,而不是从动画的起点。
赞(0
免费拨打  199-7086-1797
免费拨打  199-7086-1797免费拨打 199-7086-1797
微信二维码
手机二维码
返回顶部
返回顶部返回顶部