Mixing
how to i reverse a css animation without reversing the timing function?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
If have the following keyframe rule:
@keyframes bounceIn {
0% {transform:translateX(0);}
60% {transform:translateX(18rem);}
100% (transform:translateX(15rem);}
}
And then add it to an element like this:
.myDiv {
animation: bounceIn .5s ease;
animation-direction: reverse;
}
Then the timing function gets reversed too. Is there a way to avoid the timing function from going in reverse, or is there a timing function that is the reversed of ease that i can use?
Im interested in this because, otherwise i would have to write 2 @keyframe rules in order to get the reversed animation but with ease as a timing function going both ways.
Thanks.
css-animations
asked Apr 9 '14 at 19:25
MaliburMalibur
62931323
add a comment |
If have the following keyframe rule:
@keyframes bounceIn {
0% {transform:translateX(0);}
60% {transform:translateX(18rem);}
100% (transform:translateX(15rem);}
}
And then add it to an element like this:
.myDiv {
animation: bounceIn .5s ease;
animation-direction: reverse;
}
Then the timing function gets reversed too. Is there a way to avoid the timing function from going in reverse, or is there a timing function that is the reversed of ease that i can use?
Im interested in this because, otherwise i would have to write 2 @keyframe rules in order to get the reversed animation but with ease as a timing function going both ways.
Thanks.
css-animations
asked Apr 9 '14 at 19:25
MaliburMalibur
62931323
add a comment |
If have the following keyframe rule:
@keyframes bounceIn {
0% {transform:translateX(0);}
60% {transform:translateX(18rem);}
100% (transform:translateX(15rem);}
}
And then add it to an element like this:
.myDiv {
animation: bounceIn .5s ease;
animation-direction: reverse;
}
Then the timing function gets reversed too. Is there a way to avoid the timing function from going in reverse, or is there a timing function that is the reversed of ease that i can use?
Im interested in this because, otherwise i would have to write 2 @keyframe rules in order to get the reversed animation but with ease as a timing function going both ways.
Thanks.
css-animations
asked Apr 9 '14 at 19:25
MaliburMalibur
62931323
If have the following keyframe rule:
@keyframes bounceIn {
0% {transform:translateX(0);}
60% {transform:translateX(18rem);}
100% (transform:translateX(15rem);}
}
And then add it to an element like this:
.myDiv {
animation: bounceIn .5s ease;
animation-direction: reverse;
}
Then the timing function gets reversed too. Is there a way to avoid the timing function from going in reverse, or is there a timing function that is the reversed of ease that i can use?
Im interested in this because, otherwise i would have to write 2 @keyframe rules in order to get the reversed animation but with ease as a timing function going both ways.
Thanks.
css-animations
css-animations
asked Apr 9 '14 at 19:25
MaliburMalibur
62931323
asked Apr 9 '14 at 19:25
MaliburMalibur
62931323
edited Apr 9 '14 at 19:35
Malibur
asked Apr 9 '14 at 19:25
MaliburMalibur
62931323
asked Apr 9 '14 at 19:25
MaliburMalibur
62931323
asked Apr 9 '14 at 19:25
MaliburMalibur
62931323
62931323
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
animation-iteration-count: 2;
or
animation-iteration-count: infinite;
animation-direction: alternate;
So...
animation: bounceIn .5s ease infinite alternate;
edited Apr 10 '14 at 20:22
Albert Xing
3,88511638
answered Apr 10 '14 at 19:59
Jordano AragãoJordano Aragão
11
1
Wouldnt this reverse the timing function too? What if a just want to use the keyframe once, but in reverse - but without reversing the timing function?
– Malibur
Apr 23 '14 at 11:23
add a comment |
reverse is an essential tool of preventing code duplication, however with the timing function behaving differently it is less useful than it could be.
The solution is to find such a timing function that would act as the inverse of the original timing function
.myDiv {
animation: bounceIn .5s inverse(ease) reverse;
}
Of course there is no such construct as inverse(ease) but all timing functions being cubic bezier functions, we need another cubic bezier that will behave like the original when interpreted in reverse.
The definition for the built-in timing functions can be found in the W3C spec
e.g. ease is cubic-bezier(0.25, 0.1, 0.25, 1).
Denote that as cubic-bezier(A, B, C, D).
The inverse of ease will be a cubic-bezier(1-C, 1-D, 1-A, 1-B) which becomes cubic-bezier(0.75, 0, 0.75, 0.9)
Use that in your code
.myDiv {
animation: bounceIn .5s cubic-bezier(.75, 0, .75, .9) reverse;
}
Interestingly, the inverse of the ease-in-out gets you the same ease-in-out, so if you want a timing function that behaves exactly the same when interpreted in reverse, use that one.
answered Jan 3 at 16:03
iovuioiovuio
598
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f22972140%2fhow-to-i-reverse-a-css-animation-without-reversing-the-timing-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
animation-iteration-count: 2;
or
animation-iteration-count: infinite;
animation-direction: alternate;
So...
animation: bounceIn .5s ease infinite alternate;
edited Apr 10 '14 at 20:22
Albert Xing
3,88511638
answered Apr 10 '14 at 19:59
Jordano AragãoJordano Aragão
11
1
Wouldnt this reverse the timing function too? What if a just want to use the keyframe once, but in reverse - but without reversing the timing function?
– Malibur
Apr 23 '14 at 11:23
add a comment |
animation-iteration-count: 2;
or
animation-iteration-count: infinite;
animation-direction: alternate;
So...
animation: bounceIn .5s ease infinite alternate;
edited Apr 10 '14 at 20:22
Albert Xing
3,88511638
answered Apr 10 '14 at 19:59
Jordano AragãoJordano Aragão
11
1
Wouldnt this reverse the timing function too? What if a just want to use the keyframe once, but in reverse - but without reversing the timing function?
– Malibur
Apr 23 '14 at 11:23
add a comment |
animation-iteration-count: 2;
or
animation-iteration-count: infinite;
animation-direction: alternate;
So...
animation: bounceIn .5s ease infinite alternate;
edited Apr 10 '14 at 20:22
Albert Xing
3,88511638
answered Apr 10 '14 at 19:59
Jordano AragãoJordano Aragão
11
animation-iteration-count: 2;
or
animation-iteration-count: infinite;
animation-direction: alternate;
So...
animation: bounceIn .5s ease infinite alternate;
edited Apr 10 '14 at 20:22
Albert Xing
3,88511638
answered Apr 10 '14 at 19:59
Jordano AragãoJordano Aragão
11
edited Apr 10 '14 at 20:22
Albert Xing
3,88511638
edited Apr 10 '14 at 20:22
Albert Xing
3,88511638
edited Apr 10 '14 at 20:22
Albert Xing
3,88511638
3,88511638
answered Apr 10 '14 at 19:59
Jordano AragãoJordano Aragão
11
answered Apr 10 '14 at 19:59
Jordano AragãoJordano Aragão
11
answered Apr 10 '14 at 19:59
Jordano AragãoJordano Aragão
11
11
1
Wouldnt this reverse the timing function too? What if a just want to use the keyframe once, but in reverse - but without reversing the timing function?
– Malibur
Apr 23 '14 at 11:23
add a comment |
1
Wouldnt this reverse the timing function too? What if a just want to use the keyframe once, but in reverse - but without reversing the timing function?
– Malibur
Apr 23 '14 at 11:23
1
1
Wouldnt this reverse the timing function too? What if a just want to use the keyframe once, but in reverse - but without reversing the timing function?
– Malibur
Apr 23 '14 at 11:23
Wouldnt this reverse the timing function too? What if a just want to use the keyframe once, but in reverse - but without reversing the timing function?
– Malibur
Apr 23 '14 at 11:23
add a comment |
reverse is an essential tool of preventing code duplication, however with the timing function behaving differently it is less useful than it could be.
The solution is to find such a timing function that would act as the inverse of the original timing function
.myDiv {
animation: bounceIn .5s inverse(ease) reverse;
}
Of course there is no such construct as inverse(ease) but all timing functions being cubic bezier functions, we need another cubic bezier that will behave like the original when interpreted in reverse.
The definition for the built-in timing functions can be found in the W3C spec
e.g. ease is cubic-bezier(0.25, 0.1, 0.25, 1).
Denote that as cubic-bezier(A, B, C, D).
The inverse of ease will be a cubic-bezier(1-C, 1-D, 1-A, 1-B) which becomes cubic-bezier(0.75, 0, 0.75, 0.9)
Use that in your code
.myDiv {
animation: bounceIn .5s cubic-bezier(.75, 0, .75, .9) reverse;
}
Interestingly, the inverse of the ease-in-out gets you the same ease-in-out, so if you want a timing function that behaves exactly the same when interpreted in reverse, use that one.
answered Jan 3 at 16:03
iovuioiovuio
598
add a comment |
reverse is an essential tool of preventing code duplication, however with the timing function behaving differently it is less useful than it could be.
The solution is to find such a timing function that would act as the inverse of the original timing function
.myDiv {
animation: bounceIn .5s inverse(ease) reverse;
}
Of course there is no such construct as inverse(ease) but all timing functions being cubic bezier functions, we need another cubic bezier that will behave like the original when interpreted in reverse.
The definition for the built-in timing functions can be found in the W3C spec
e.g. ease is cubic-bezier(0.25, 0.1, 0.25, 1).
Denote that as cubic-bezier(A, B, C, D).
The inverse of ease will be a cubic-bezier(1-C, 1-D, 1-A, 1-B) which becomes cubic-bezier(0.75, 0, 0.75, 0.9)
Use that in your code
.myDiv {
animation: bounceIn .5s cubic-bezier(.75, 0, .75, .9) reverse;
}
Interestingly, the inverse of the ease-in-out gets you the same ease-in-out, so if you want a timing function that behaves exactly the same when interpreted in reverse, use that one.
answered Jan 3 at 16:03
iovuioiovuio
598
add a comment |
reverse is an essential tool of preventing code duplication, however with the timing function behaving differently it is less useful than it could be.
The solution is to find such a timing function that would act as the inverse of the original timing function
.myDiv {
animation: bounceIn .5s inverse(ease) reverse;
}
Of course there is no such construct as inverse(ease) but all timing functions being cubic bezier functions, we need another cubic bezier that will behave like the original when interpreted in reverse.
The definition for the built-in timing functions can be found in the W3C spec
e.g. ease is cubic-bezier(0.25, 0.1, 0.25, 1).
Denote that as cubic-bezier(A, B, C, D).
The inverse of ease will be a cubic-bezier(1-C, 1-D, 1-A, 1-B) which becomes cubic-bezier(0.75, 0, 0.75, 0.9)
Use that in your code
.myDiv {
animation: bounceIn .5s cubic-bezier(.75, 0, .75, .9) reverse;
}
Interestingly, the inverse of the ease-in-out gets you the same ease-in-out, so if you want a timing function that behaves exactly the same when interpreted in reverse, use that one.
answered Jan 3 at 16:03
iovuioiovuio
598
reverse is an essential tool of preventing code duplication, however with the timing function behaving differently it is less useful than it could be.
The solution is to find such a timing function that would act as the inverse of the original timing function
.myDiv {
animation: bounceIn .5s inverse(ease) reverse;
}
Of course there is no such construct as inverse(ease) but all timing functions being cubic bezier functions, we need another cubic bezier that will behave like the original when interpreted in reverse.
The definition for the built-in timing functions can be found in the W3C spec
e.g. ease is cubic-bezier(0.25, 0.1, 0.25, 1).
Denote that as cubic-bezier(A, B, C, D).
The inverse of ease will be a cubic-bezier(1-C, 1-D, 1-A, 1-B) which becomes cubic-bezier(0.75, 0, 0.75, 0.9)
Use that in your code
.myDiv {
animation: bounceIn .5s cubic-bezier(.75, 0, .75, .9) reverse;
}
Interestingly, the inverse of the ease-in-out gets you the same ease-in-out, so if you want a timing function that behaves exactly the same when interpreted in reverse, use that one.
answered Jan 3 at 16:03
iovuioiovuio
598
edited Mar 6 at 11:58
answered Jan 3 at 16:03
iovuioiovuio
598
answered Jan 3 at 16:03
iovuioiovuio
598
answered Jan 3 at 16:03
iovuioiovuio
598
598
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f22972140%2fhow-to-i-reverse-a-css-animation-without-reversing-the-timing-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
