发表新帖
发表新帖

Can I set the progress of a keyframe animation to a specific stage?

后端 未结
关注
2 1071
灰色年华
灰色年华 2021-02-19 03:21

I have a keyframe animation with multiple steps:

@keyframes rotateLeftSideCustom {
    0% {
    }
    40% {
        -webk
相关标签:
2条回答
  • 情歌与酒
    2021-02-19 03:55

    Did I get it right, that you want to start the the animation not at 0%, but at 40%?

    There's a way to do it CSS-only, by using negative value for animation-delay

    .section-animation {
    animation-delay: -0.24s; /*40% of 0.6s */
}

    Additionally, you might want to add

    .section-animation {
    animation-play-state: paused;
}

    to your element, so that you might can see the state of the animation as a static image, not animated.

    Here's a link: https://css-tricks.com/starting-css-animations-mid-way/

    0 讨论(0)
  • 我寻月下人不归
    2021-02-19 04:07

    You could use jQuery for animation. With .animate() you have a property step.

    animate API

    From the docs:

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

<script>
$( "#go" ).click(function() {
  $( ".block:first" ).animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});
</script>

</body>
</html>

    Where *now* is the actual state of your animation.

    UPDATE

    Propably you can use requestAnimationFrame but this is also like my other solution. The difference is - that it's pure JavaScript, so no external library needed.

    0 讨论(0)
 看不清?
提交回复
热议问题