animation注意点

.wrap {
      /*动画内的属性*/
      animation-name:name; /* 动画名称*/
      animation-duration: 5s; /*一个动画周期的时长 （0%~100%）或（from~to）*/
      /*作用与关键帧的周期而非整个动画周期，
      *也就是说每一帧都是ease-in
      *而不是整个关键帧周期是ease-in
      */
      animation-timing-function: ease-in;
      animation-direction: reverse;
      /*默认值：normal；
      *reverse:反转的是关键帧和animation-timing-function
      *alternate:从from关键帧开始到to关键帧，再从to关键帧回到from关键帧
      *alternate-reverse：与alternate相反
      */
      animation-delay: 2s;/*动画延迟2s后再执行*/
      /*********************************************************/
      /*只作用于动画内的属性*/
      animation-iteration-count: 2;/*动画重复的次数；值：数字或是infinite（无限循环）；重复的是关键帧*/

      /*元素在动画外的状态；
      *默认值none；
      *backwards：from之前（动画开始之前）的状态保持的跟from一致；
      *forwards：to之后（动画结束之后）的状态与to的状态保持一致
      *both：from之前和to之后分别与from和to保持一致；
      */
      animation-fill-mode: backwards;
      
    }
    .wrap:hover {/*hover让动画暂停*/
      animation-play-state: paused;/*默认值：running；paused：让动画暂停*/
    }

    @keyframes name{
      from{
        transform: translateY(-100px);
      }
      to{
        transform: translateY(100px);
      }
    }