animation

animation语法

•       animation-name:是用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。

•       animation-duration是用来指定元素播放动画所持续的时间长，取值time为数值，单位为s （秒.）其默认值为“0”。这个属性跟transition中的transition-delay使用方法是一样的。

•       animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。

•       animation-delay:是用来指定元素动画开始时间。取值time为数值，单位为s(秒)，其默认值也是0。这个属性和transition-duration使用方法是一样的。

•      animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值number为数字，其默认值为“1”；infinite为无限次数循环。

•      animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
•   animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。

发光的按钮

<style type="text/css">
    a.btn{
      background: #60cb1b;
      font-size: 16px;
      padding:10px 15px;
      color:#fff;
      text-align: center;
      text-decoration:none;
      font-weight:bold;
      text-shadow:0 -1px 1px rgba(0,0,0,0.3);
      border-radius:5px;
      box-shadow:0 0 5px rgba(255,255,255,0.6) inset,0 0 3px rgba(220,120,220,0.8);
      animation-name:buttonLight;
      animation-duration:5s;
      animation-iteration-count:infinite;
    }
    @keyframes buttonLight{
      from{
        background: rgba(96,203,27,0.5);
        box-shadow:0 0 5px rgba(255,255,255,0.3) inset,0 0 3px rgba(220,120,200,0.5);
        color:red;
      }
      25%{
        background:rgba(196,203,27,0.8);
        box-shadow:0 0 10px rgba(255,255,255,0.5) inset,0 0 8px rgba(120,120,200,0.8);
        color:blue;
      }
      50%{
        background: rgba(196,203,127,1);
        box-shadow:0 0 5px rgba(155,255,255,0.3) inset,0 0 3px rgba(220,120,100,1);
        color:orange;
      }
      75%{
        background: rgba(196,203,27,0.8);
        box-shadow:0 0 10px rgba(255,155,255,0.5) inset,0 0 8px rgba(120,120,200,0.8);
        color:black;
      }
      to{
        background: rgba(96,203,27,0.5);
        box-shadow:0 0 5px rgba(255,255,255,0.3) inset,0 0 3px rgba(220,120,200,0.5);
        color:green;
      }
    }
</style>
<a href="" class="btn">发光的按钮</a>

 变化的形状

<style>
div{
      margin:100px auto;
    }
    a.box{
      display: block;
      width:50px;
      height:50px;
      background:red;
      margin-bottom:20px;
      animation-name:round;
      animation-duration:5s;
      animation-timing-function:ease;
      animation-iteration-count:infinite;
    }
     @keyframes round{
      from{
        border-radius: 0px;
        background: red;
      }
      50%{
        border-radius: 25px;
        background: green;
      }
      to{
          border-radius: 0px;
        background: red;
      }
     }
</style>
<div>
          <a href="#" class="box"></a>
          <span class="click-btn">click</span>
      </div>

 点击事件触发

<style>
a.box{
      display: block;
      width:50px;
      height:50px;
      background:red;
      margin-bottom:20px;
    }
    a.round{
      border-radius:25px;
      background: green;
      animation-name:round;
      animation-duration:5s;
      animation-timing-function:ease;
      animation-iteration-count:infinite;
    }
    @keyframes round{
      from{
        border-radius: 0px;
        background: red;
      }
      50%{
        border-radius: 25px;
        background: green;
      }
      to{
          border-radius: 0px;
        background: red;
      }
     }
    .click-btn{
      background:rgba(125,220,80,0.8);
      border-radius:5px;
      box-shadow:inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);
      padding:5px 10px;
      color:#369;
      font-size: 16px;
      font-weight: bold;
      text-align:center;
      text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
      cursor: pointer;
    }</style>

<div>

          <a href="#" class="box"></a>

          <span class="click-btn" onclick="addClick()">click</span>

      </div>

      <script>

          function addClick(){

              let ele = document.getElementsByClassName('box')[0];

              ele.classList.add('round');

          }

      </script>