我可以將關鍵幀動畫的進度設置為特定階段嗎？

Question

我有一個關鍵幀動畫，有多個步驟：

@keyframes rotateLeftSideCustom {
    0% {
    }
    40% {
        -webkit-transform: rotateY(-15deg);
        transform: rotateY(-15deg);
        opacity: .8;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: scale(0.8) translateZ(-200px);
        transform: scale(0.8) translateZ(-200px);
        opacity: 0;
    }
}

.section-animation {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateLeftSideCustom 0.6s both ease-in;
    animation: rotateLeftSideCustom 0.6s both ease-in;
}

有什么辦法可以用JavaScript來設置動畫的進度嗎？

例如：

document.querySelector('.section-animation').animationState('40%');

上下文：我正在嘗試構建一個可拖動的界面，我需要將動畫的進度與用戶拖動的數量對齊。

Answer 1

我是否做對了，你想要開始動畫不是0％，而是40％？

通過對動畫延遲使用負值，有一種方法可以僅使用CSS

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

此外，您可能想要添加

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

到您的元素，以便您可以將動畫的狀態視為靜態圖像，而不是動畫。

這是一個鏈接： https ： //css-tricks.com/starting-css-animations-mid-way/

Answer 2

你可以使用jQuery來制作動畫。 使用.animate()您有一個屬性step 。

動畫API

來自文檔：

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

其中*now*是動畫的實際狀態。

UPDATE

你可以使用requestAnimationFrame，但這也和我的其他解決方案一樣。 區別在於 - 它是純JavaScript，因此不需要外部庫。

我可以將關鍵幀動畫的進度設置為特定階段嗎？

問題描述

2 個解決方案

解決方案1
5 2015-04-21 14:21:25

解決方案2
1 2015-04-21 14:07:40

我可以將關鍵幀動畫的進度設置為特定階段嗎？

問題描述

2 個解決方案

解決方案1 5 2015-04-21 14:21:25

解決方案2 1 2015-04-21 14:07:40

解決方案1
5 2015-04-21 14:21:25

解決方案2
1 2015-04-21 14:07:40