How do you reverse css keyframe animation in webkit? - html

Question

I have a control that I want to transition between two locations following a keyframe animation. Is there a way to use the same keyframe but in reverse? Also, is there a way to stop the animation, halfway and reverse it to the beginning?
Here is what I have now (and I want to combine the two keyframes:
#-webkit-keyframes explode {
0% {
-webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
}
33% {
-webkit-transform: scale(2.0) translate(100px, -150px);
}
67% {
-webkit-transform: scale(2.0) translate(200px, -250px);
}
100% {
-webkit-transform: scale(1.0) translate(-15px, -15px);
}
}
#-webkit-keyframes explodeBack {
0% {
-webkit-transform: scale(1.0) translate(-15px, -15px);
}
67% {
-webkit-transform: scale(2.0) translate(100px, -150px);
}
100% {
-webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
}
}
.leftArrowAnimateForward{
-webkit-animation-name: explode;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction:normal; /* Safari and Chrome */
-webkit-transform: scale(1.0) translate(-15px, -15px);
}
.leftArrowAnimateBackward{
-webkit-animation-name: explodeBack;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction:alternate;
-webkit-transform: scale(1.0) translate(0px, 0px);
}

Answer 1

It's hard to see what your trying to do without visually seeing what you have so far, but checkout animation-fill-mode.
This will allow your animation to stop on the last keyframe when set to forward, where at the moment I believe the keyframes go back to 0 when they are finished.
Have a play and let us know if your successful.

Answer 2

You can do the first thing you want to do if you combine animation-iteration-count: 2, with an animation-direction: alternate, and a animation-delay that is negative the length of your animation, you will get an animation to play in reverse exactly once. (It basically skips ahead to the reverse direction animation and starts playing there.)
You can't do the second thing you want to do with pure CSS animation, unless you define a second set of keyframes and toggle between the classes with JS (or hover or whatever)

Answer 3

I had the same problem, and use SCSS to generate two version of keyframe: normal and reverse.
https://github.com/lichunbin814/scss-utils#with-reverse-version
/* mixin */
#mixin keyframe-reverse( $name, $value) {
#keyframes #{$name}-rev {
#each $position,
$change in $value {
#{ 100 -$position}% {
#each $prop,
$val in $change {
#{$prop}: #{$val};
}
}
}
}
}
#mixin keyframe-normal( $name, $value) {
#keyframes #{$name} {
#each $position,
$change in $value {
#{$position}% {
#each $prop,
$val in $change {
#{$prop}: #{$val};
}
}
}
}
}
#mixin keyframe-gen( $name, $value, $genReverse) {
#include keyframe-normal( $name: $name, $value: $value);
#if ($genReverse) {
#include keyframe-reverse( $name: $name, $value: $value)
}
}
/* use */
#include keyframe-gen(
$name : "fadeIn" ,
$value : (
0: (
transform: scale(1),
opacity: 1
),
100: (
transform: scale(0),
opacity: 0
),
) ,
$genReverse : true
);
.menu {
animation-name: fadeIn-rev;
&.active {
animation-name: fadeIn;
}
}
// output css
/*
#keyframes fadeIn {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#keyframes fadeIn-rev {
100% {
transform: scale(1);
opacity: 1;
}
0% {
transform: scale(0);
opacity: 0;
}
}
*/