CSS动画添加到现有定义

owfi6suc 于 2023-05-23 发布在其他

关注(0)|答案(1)|浏览(125)

给出以下来源：

<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？我知道我可以在.icon选择器上列出这两个动画，但是原始页面有许多不同时间的动画。

css

来源：https://stackoverflow.com/questions/76308971/css-animation-adding-to-existing-definition

1条答案

按热度按时间

mrzz3bfm1#

尽管您可以在一个元素上应用多个属性（用逗号分隔），但在这里您需要在同一个属性transform上应用不同的值。请参阅this answer，其中解释了一些解决方法。
如果你不能改变html结构，那么接下来的近似方法是：

<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>

赞(0）回复(0）举报 2023-05-23

我来回答

CSS动画添加到现有定义

1条答案

相关问题

热门标签

最新问答