Menu
I have a keyframe animation with multiple steps:
@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;
}
Is there any way I can use JavaScript to set the progress of the animation?
Eg:
document.querySelector('.section-animation').animationState('40%');
Context: I'm trying to build a draggable interface where I need to align the progress of the animation with the amount of dragging the user does.
363
The Auto-Keyframe mode allows automatically recording keyframes when building animations. Simply enable the Auto-Keyframe mode, move the Playhead, and make an edit.
A keyframe can be a “step”It will divide that change up over time and make the transition.
offset. The offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null . This is equivalent to specifying start and end states in percentages in CSS stylesheets using @keyframes . If this value is null or missing, the keyframe will be evenly spaced between adjacent keyframes.
The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.
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/
103
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
