zoukankan      html  css  js  c++  java
  • css3 动画的播放、暂停和重新开始

    播放

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

    <div id="box" class="box"></div> 
    

    css

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

    暂停

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

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

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

    重新开始

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

    效果图

    代码部分:

    html

    <div id="box" class="box"></div>
      <p id="text"></p>
      <div class="control">
        <button id="play" value="播放">播放</button>
        <button id="pause" value="暂停">暂停</button>
        <button id="restart" value="重新开始">重新开始</button>
      </div>
    

    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;
         100px;
        height: 100px;
        background-color: #5578a2;
      }
      .play {
        animation: mymove 5s infinite ease;
      }
      .restart {
        animation: mymove1 5s infinite ease;
      }
      .pause {
        animation-play-state: paused;
      }
    

    js

    var play = document.getElementById('play'),
        pause = document.getElementById('pause'),
        restart = document.getElementById('restart'),
        text = document.getElementById('text'),
        box = document.getElementById('box');
      pause.addEventListener('click', function() {
        if (box.classList.contains('play')) {
          box.className = 'pause play box';
        } else {
          box.className = 'pause restart box';
        }
        text.innerHTML = this.value;
      });
      play.addEventListener('click', function() {
        if (box.classList.contains('play')) {
          box.className = 'play box';
        } else {
          box.className = 'restart box';
        }
        text.innerHTML = this.value;
      });
      restart.addEventListener('click', function() {
        if (box.classList.contains('play')) {
          box.className = 'restart box';
        } else {
          box.className = 'play box';
        }
        text.innerHTML = this.value;
      });
    
  • 相关阅读:
    Kubernetes节点维护
    Kubernetes helm配置国内镜像源
    windows universal app中使用mvvm light
    windows phone 开发常用小技巧
    异步编程中的最佳做法(Async/Await) --转
    windows phone 开发常用小技巧
    windows phone 开发常用小技巧
    windows phone 开发常用小技巧
    #假期归来# 看看国外开发者第一时间用swift写的Flappy Bird (2014.6.3)
    vs2013 TFS如何彻底删除团队项目
  • 原文地址:https://www.cnblogs.com/yangrenmu/p/7085815.html
Copyright © 2011-2022 走看看