當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

css3 forwards、backwards、both

發布時間：2023/12/13 综合教程 25 生活家

生活随笔收集整理的這篇文章主要介紹了 css3 forwards、backwards、both 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

animation-fill-mode 屬性規定動畫在播放之前或之后，其動畫效果是否可見。

none	不改變默認行為。
forwards	當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。
backwards	在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
both	向前和向后填充模式都被應用。

關于這三個，很好理解；具體請看demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    *{margin: 0; padding: 0;}
    .box{width: 100px; height: 100px; background: red; border-radius: 50%;  opacity: 0.5; animation: paly 2s linear backwards }
      @keyframes paly{
          0%{-webkit-transform: scale(0.5,0.5);
          -ms-transform: scale(0.5,0.5);
          -o-transform: scale(0.5,0.5);
          transform: scale(0.5,0.5);}
          100%{
              -webkit-transform:scale(0,0);
              -ms-transform:scale(0,0);
              -o-transform:scale(0,0);
              transform:scale(0,0);
          }
      }
    </style>
    
</head>
<body>
    <div class="box"></div>
</body>
</html>

這是一個大小勻速變化的圓，當animation的填充模式為backwards的時候，可以看到，小圓縮小后直至沒有了，說明保持了最后一幀；當animation的填充模式為forwards的時候，則相反；當animation的填充模式為both的時候，第一幀和最后一幀都保留；

總結

以上是生活随笔為你收集整理的css3 forwards、backwards、both的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

forwards