其他分享
首页 > 其他分享> > html 动画

html 动画

作者：互联网

动画

  1. animation 动画

    • 可复用

    • 动的部分单独拿出来放在css里

      • @keyframes告诉你们动画具体的变化内容（怎么动）

  2. animation-name : 需要带哦用的@keyframes的动画名

  3. animation-duration: s ms 需要的时间

  4. animation-delay : 动画速率的变化

  5. anImation-timing-function

    • linear 匀速

    • ease 慢快慢

    • ease-in 漫入

    • ease-out 慢出

    • ease-in-out 慢入慢出

    • cublic-bezier 贝塞尔曲线

    • steps()//其中的数字代表停留的帧数的个数

      • start

        • 保留下一帧 20% %0快速的过渡

      • end

        • 保留当前帧 0% 100%帧快速的过去

  6. animation-iteration-count 规定动画播放的次数

    • 1 2 3 numeber

    • infinite 无限次数

  7. anination-dircetion 动画变换的方向

    • normal 默认

    • reverse 反向

    • alternate 先正再反（播放次数至少2次）

    • alternate-reverse 先反

  8. animation-fill-mode 决定动画的第一帧和最后一帧的状态

    • none 原始状态=》动画开始=》动画帧100%

    • forwards 原始状态=》动画开始=》动画帧100%

    • backwards 动画0帧=》动画开始=》动画100%

  9. animation-play-state 控制动画开始暂停

    • paused 暂停

    • running 运行

1.案例

效果：运用动画达到变化颜色和宽度效果
<style>
 div{
        width: 200px;
        height: 100px;
        background-color: blue;
        animation:run 3s steps(3) ;
​
      }
      div:hover{
        animation-play-state: paused;
      }
      @keyframes run{
        0%{
          background-color: yellowgreen;
          width: 100px;
        }
        100%{
          background-color: red;
          width: 800px;
        }
      }
</style>
<body>
    <div>
        
    </div>
</body>

 

 

 

案例二
通过动画的效果达到轮播的效果
<style>
 *{margin:0;padding:0;}
      a{text-decoration: none;}
      li{list-style: none;}
      div{
        /* overflow: hidden; */
        position: relative;
        width: 1000px;
        height: 475px;
        border: 1px solid red;
        margin: 100px auto 0;
      }
      ul{
        position: absolute;
        width: 7000px;
        height: 475px;
        /* 加一步 无效操作 */
        animation:move 7s steps(7) infinite;
        /* 0-1000  1000-2000 2000-3000  3000-4000
      4000-5000 5000-6000 6000-7000*/
      }
      @keyframes move{ 
        0%{
          left: 0;
        }
        100%{
          left:-7000px; 
        }
      } 
      li{
        float: left;
        width: 1000px;
        height: 475px;
      }
​
      li:nth-child(1){
        background-color: red;
      }
      li:nth-child(2){
        background-color: orange;
      }
      li:nth-child(3){
        background-color: yellow;
      }
      li:nth-child(4){
        background-color: green;
      }
      li:nth-child(5){
        background-color: yellowgreen;
      }
      li:nth-child(6){
        background-color: blue;
      }
      li:nth-child(7){
        background-color: purple;
      }
</style>
 <body>
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>
  </body>

标签：动画,color,li,nth,html,background,animation
来源： https://www.cnblogs.com/lxyyds/p/16201824.html