CSS animation adding to existing definition

Question

Given the following source:

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

Is there a way to get icon to have rotate1 and animate1 by a way of inheritance? I know I could list both animations on the .icon selector, but the original page has many animations with different timings.

Philippe · Accepted Answer · 2023-05-22 19:38:19Z

0

Despite the fact you can apply multiple attributes on an element, separated by a comma, here you need to apply different values on the same attribute transform. Please have a look at see this answer, which explain some workaround.

Il you can't change the html structure, a subsequent approximative way would be :

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

edited May 22, 2023 at 19:38

answered May 22, 2023 at 19:33

Philippe

1,30713 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS animation adding to existing definition

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related