您现在的位置是：首页 > 学无止境 > web前端web前端

css动画是可以暂停的

管理员2020-03-30 14:03:10【web前端】1491人已围观

简介css动画是可以暂停的

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

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

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

.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;
  }
}

好啦，大家看代码就知道怎么写了。

顶一下 （1） 赏 踩一下 （0）
小郭博客

相关文章

最新发表

标签云 更多

点击排行

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏