day14 css动画应用

动画（animation）

<style>
    div{
       animation-name:x;//动画名称
       animation-duratoin:10s;//持续时间
       animation-delay:1s;//延迟时间
       animation-direction:reverse;//动画效果，反转
       animation-fill-mode:forwards;//保留最后一帧的样式
       animation-iteraton-count:infinite;//动画执行的次数（循环）
       animation-timing-funtion:liner;//动画时间曲线（线性）
       animation-play-states:running;//动画暂停
    }
    @keyframes x {
      from{
         left:0;
      }
      to{
         backgroud-color:pink;
         left:1000px;
      }
    }
    
<style>

速写：animation：name duration direction timing-function；（常用）
在@keyframes中可以用10%20%来代替from、to。

第三方动画库【animate.css】

1.引入动画库
2.为动画添加class