Js点击触发Css3的动画Animations、过渡Transitions效果

关键是首先指定动画效果的CSS属性名称，然后在Js中改变这个属性

如果不使用Js触发，可以选择利用css的状态：hover，focus，active 来触发，也可以一开始就触发

下例为Js点击触发过渡Transitions效果，指定的属性名称是width

<!DOCTYPE html>

<html>

<head>

  <style>

    #aaa {

      width: 100px;

      height: 100px;

      background: blue;

      transition: width 2s;

      -moz-transition: width 2s; /* Firefox 4 */

      -webkit-transition: width 2s; /* Safari and Chrome */

      -o-transition: width 2s; /* Opera */

    }

  </style>

  <script>

    function big() {

      document.getElementById("aaa").style.width = "300px";

    }

    function small() {

      document.getElementById("aaa").style.width = "100px";

    }

  </script>

</head>

<body>

  <button onclick="big()">Big</button>

  <button onclick="small()">Small</button>

  <div id="aaa"></div>

</body>

</html>

原创文章，欢迎转载，转载请注明出处！