css - Multiple webkit animations

Question

Welcome To Ask or Share your Answers For Others

css - Multiple webkit animations

asked Oct 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - Multiple webkit animations

I'm trying to run multiple webkit animations at once. Demo can be seen here:

HTML:

<body>
  <div class="dot"></div>
</body>

JavaScript:

$(function(){

    $('body').append('<div class="dot" style="left:100px; top:200px"></div>');


});

CSS:

body{
  background: #333;
}

.dot{
    background: -webkit-radial-gradient(center, ellipse cover, #f00 90%, #fff 10%);
    border-radius: 6px;
    background: red;
    display: block;
    height: 6px;
    position: absolute;
    margin: 40px 0 0 40px;
    width: 6px;
    -webkit-box-shadow: 0 0 2px 2px #222;




    -webkit-animation: shrink 2.s ease-out;

    -webkit-animation: pulsate 4s infinite ease-in-out;
  }


  @-webkit-keyframes shrink{
    0%{
      -webkit-box-shadow: 0 0 2px 2px #222;
      -webkit-transform: scale(2);
    }
    50%{
      -webkit-box-shadow: 0 0 2px 2px #222;
          -webkit-transform: scale(1.5);
      }
    100%{
      -webkit-box-shadow: 0 0 2px 2px #222;
          -webkit-transform: scale(1);
      }
  }

    @-webkit-keyframes pulsate{
      0%{
          -webkit-transform: scale(1);
      -webkit-box-shadow: 0 0 2px 2px #222;
      }
      50%{
          -webkit-transform: scale(1.1);
      -webkit-box-shadow: 0 0 2px 2px #111;
      }
    100%{ 
          -webkit-transform: scale(1);
      -webkit-box-shadow: 0 0 2px 2px #222;
      }
  }

.dot has two animations:

shrink
pulsate (hard to see but it's there)

Perhaps I need to find a good way sync them. Once shrink animation is done, pulsate. I can't run them both at once so pulsate is commented out in .dot.

Any suggestions? Thanks.

question from:https://stackoverflow.com/questions/12590562/multiple-webkit-animations

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T05:25:42+0000

You can separate multiple animations with a , and set a delay on the second one if needed:

-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

2s in the second animation is the delay

Since Chrome 43 and Safari 9/9.2, the -webkit- prefix is only needed for Blackberry and UC (Android) browser. So the new correct syntax would be

animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

Categories

css - Multiple webkit animations

css - Multiple webkit animations

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags