css3 动画的播放、暂停和重新开始

逃离我推掉我的手 2021-09-17 19:12 279阅读 0赞

# 播放 #

先在`@keyframes`中创建动画，之后把它捆绑到某个选择器，就可以产生动画效果。  
`html`

`css`

@keyframes mymove {
        0% {
          margin-left: 0px;
        }
        50% {
          margin-left: 400px;
        }
        100% {
          margin-left: 0px;
        }
      }
    .box {
        margin: 50px 0;
        width: 100px;
        height: 100px;
        background-color: #5578a2;
        animation: mymove 5s infinite ease;
      }

## 暂停 ##

我们播放动画时，如要暂停动画，就要用到**`animation-play-state`**这个属性。`animation-play-state`属性有两个值：

paused: 暂停动画;
    running: 继续播放动画;

当然去掉`animation-play-state`，也可以继续播放动画。

## 重新开始 ##

如果要重新开始动画，加载一个相同的动画，不同名字，可以达到重新开始动画的效果。  
效果：

![效果图][strip]

## 代码部分： ##

`html`

`css`

@keyframes mymove {
        0% {
          margin-left: 0px;
        }
        50% {
          margin-left: 400px;
        }
        100% {
          margin-left: 0px;
        }
      }
      @keyframes mymove1 {
        0% {
          margin-left: 0px;
        }
        50% {
          margin-left: 400px;
        }
        100% {
          margin-left: 0px;
        }
      }
      .box {
        margin: 50px 0;
        width: 100px;
        height: 100px;
        background-color: #5578a2;
      }
      .play {
        animation: mymove 5s infinite ease;
      }
      .restart {
        animation: mymove1 5s infinite ease;
      }
      .pause {
        animation-play-state: paused;
      }

`js`

[strip]: /images/20210812/ff6c7fc14b054eedaa341fe4ba991289.png