欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS動畫添加到現(xiàn)有定義

CSS
江奕云2年前7瀏覽0評論

鑒于以下來源:

<head>
    <style>
        .main .item {
            animation: animate1 2s infinite;
        }

        .main .icon {
            animation: rotate1 2s infinite;
        }


        @keyframes animate1 {
            0%   { transform: scale(1) }
            100% { transform: scale(1, 1.5) }
        }
        @keyframes rotate1 {
            0%   { transform: rotate(0deg) }
            100% { transform: rotate(-5deg) }           
        }
    </style>
</head>
<body>
<div class="main">
    <div class="item">test 123</div>
    <div class="item">test 456</div>
    <div class="item icon">icon!</div>
</div>
</body>

有沒有辦法通過繼承的方式讓icon擁有rotate1和animate1？ 我知道我可以把這兩個動畫都列在。圖標(biāo)選擇器，但是原始頁面有許多不同計時的動畫。

盡管您可以在一個元素上應(yīng)用多個屬性，用逗號分隔，但是這里您需要在同一個屬性轉(zhuǎn)換上應(yīng)用不同的值。請看看這個答案，它解釋了一些解決方法。

如果你不能改變html的結(jié)構(gòu)，接下來的近似方法是:

<head>
  <style>
    .main {
      animation: animate1 2s infinite;
    }
    
    .main>.icon {
      animation: rotate1 2s infinite;
    }
    
    @keyframes animate1 {
      0% {
        transform: scale(1)
      }
      100% {
        transform: scale(1, 1.5)
      }
    }
    
    @keyframes rotate1 {
      0% {
        transform: rotate(0deg)
      }
      100% {
        transform: rotate(-5deg)
      }
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="item">test 123</div>
    <div class="item">test 456</div>
    <div class="item icon">icon!</div>
  </div>
</body>