Develop Reference

How can I keep element at last state of CSS animation? [duplicate]

This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 5 months ago.
I have a page with a lot of interactivity going on. Clicking a button here changes the text and image over there... that kind of stuff. Just about everything is controlled by click handlers adding or removing CSS classNames to show or hide the appropriate content. Almost all of the animation is achieved with CSS transitions. Pretty straight forward.
But I have one element that requires a keyframe animation. Its default state is to be hidden until it's time for it to enter the UI... at which point it needs to have this CSS keyframe animation applied and stay in the last state the animation had it in.
For the sake of this example, let's just say that when Block A becomes visible (by clicking the button), the element in question, Block A1, needs to fade in (remember in my actual use case, the animation is more complicated and can't be achieved using transitions... it requires a keyframe animation) and then remain with the properties it had in the last frame of the animation: in this case opacity: 1 after the animation runs.
Right now, the only way I'm able to do this is to use javascript to set the opacity after the animation runs. This works but I can see it getting really messy/complicated when elements now have a style attribute overriding the styles set in the CSS rulesets. You can see this start to happen when you click the button again to hide the block and then AGAIN to show it... Block A1 is still set to opacity: 1 so the animation ha no effect after the 1st time around.
Is there a better way to do this?
const $btn = document.querySelector('button');
const $block = document.querySelector('.block-a');
const $blocka1 = document.querySelector('.block-a-1');
$btn.addEventListener('click', function() {
$block.classList.toggle("is-visible")
})
$blocka1.addEventListener('animationend', function() {
console.log('done');
this.style.opacity = 1;
})
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button {
font-size: 32px;
margin-bottom: 24px;
cursor: pointer;
}
.block-a {
width: 25vw;
height: 50vh;
background-color: red;
padding: 20px;
color: #fff;
transform: translateY(150%);
transition: all .25s linear;
}
.block-a.is-visible {
transform: translateY(0);
transition: all .1s ease-in;
}
.block-a-1 {
font-size: 32px;
font-weight: bold;
color: white;
background-color: blue;
padding: 10px;
opacity: 0;
}
.block-a.is-visible .block-a-1 {
animation: fadeIn 2s linear 2s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<button>Do Block 1</button>
<div class="block-a">
<span class="block-a-1">Block A-1</span>
<h1>Block A</h1>
</div>

You can maintain the last animation frame using:
animation-fill-mode:forwards;
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
const $btn = document.querySelector('button');
const $block = document.querySelector('.block-a');
$btn.addEventListener('click', function() {
$block.classList.toggle("is-visible")
})
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button {
font-size: 32px;
margin-bottom: 24px;
cursor: pointer;
}
.block-a {
width: 25vw;
height: 50vh;
background-color: red;
padding: 20px;
color: #fff;
transform: translateY(150%);
transition: all .25s linear;
}
.block-a.is-visible {
transform: translateY(0);
transition: all .1s ease-in;
}
.block-a-1 {
font-size: 32px;
font-weight: bold;
color: white;
background-color: blue;
padding: 10px;
opacity: 0;
}
.block-a.is-visible .block-a-1 {
animation: fadeIn 2s linear 2s;
animation-fill-mode:forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<button>Do Block 1</button>
<div class="block-a">
<span class="block-a-1">Block A-1</span>
<h1>Block A</h1>
</div>

Set the animation property animation-fill-mode to forwards or add it to animation like animation: fadeIn 2s linear 2s forwards;

Reverse a CSS animation without jquery

I'm making a dropdown menu that should slide into view on click. I want to make it slide back up on a second click, but have been struggling to figure out how to do so. Most of the answers I've found online involve jQuery, but I am hoping to accomplish this with vanilla js.
My CSS:
.post-more-dropdown {
background-color: #f8f9fa;
display: block;
position: absolute;
right: 0px;
top: 60px;
min-width: 80px;
animation-name: dropdown;
animation-play-state: paused;
animation-fill-mode: backwards;
animation-duration: 0.7s;
a {
display: block;
padding-left: 10px;
padding-top: 10px;
}
a:hover {
background-color: #555555;
color: white;
cursor: pointer;
}
}
#keyframes dropdown {
0% {
max-height: 0px;
opacity: 0;
}
100% {
max-height: 200px;
opacity: 1;
}
}
My javascript:
function post_more_dropdown(post_id) {
dropdown = document.querySelector(`#post-more-dropdown-${post_id}`);
dropdown.style.animationPlayState = "running";
}
This works perfectly to get the dropdown to run on click, but I'm struggling to figure out how to reverse it on the second click. I was thinking I could create a new #keyframes dropdown-reverse animation and add it to the class, but then I realized I can't control two animations under one class with JS. I was thinking I could also create two different classes and add/remove those classes with JS along with controlling two different animations, but I feel like there's got to be a more elegant solution that I'm missing.
I have a feeling that animation-direction is going to be part of the answer, but I haven't quite figured out how that will work for this.

Use the following CSS, change class using JavaScript.
function post_more_dropdown(post_id) {
dropdown = document.querySelector(`#post-more-dropdown-${post_id}`);
if (dropdown.classList.contains('dropdown-animate-forward')) {
dropdown.classList.add('dropdown-animate-backward');
dropdown.classList.remove('dropdown-animate-forward');
} else {
dropdown.classList.add('dropdown-animate-forward');
dropdown.classList.remove('dropdown-animate-backward');
}
}
setInterval(function() {
post_more_dropdown(1)
}, 1000);
.post-more-dropdown {
background-color: #f8f9fa;
display: block;
position: absolute;
right: 0px;
top: 60px;
min-width: 80px;
a {
display: block;
padding-left: 10px;
padding-top: 10px;
}
a:hover {
background-color: #555555;
color: white;
cursor: pointer;
}
}
/* forward animation */
.dropdown-animate-forward {
animation-name: dropdownForward;
animation-fill-mode: backwards;
animation-duration: 0.7s;
}
#keyframes dropdownForward {
0% {
max-height: 0px;
opacity: 0;
}
100% {
max-height: 200px;
opacity: 1;
}
}
/* backward animation */
.dropdown-animate-backward {
animation-name: dropdownBackward;
animation-fill-mode: forward;
animation-duration: 0.7s;
}
#keyframes dropdownBackward {
0% {
max-height: 200px;
opacity: 1;
}
100% {
max-height: 0px;
opacity: 0;
}
}
<div id="post-more-dropdown-1" class="post-more-dropdown">Post more</div>

How to Remove the Previous <p> after Display Another <p>?

Javascript/Css3 Expert,
I have my coding which display texts in sequence, however i need to remove the previous <p> text when display another <p>.
In simple words...I want to replace old displayed texts with upcoming new text and display the final text as it is.
here is the coding:
body {
background: #000;
padding-top: 10px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
opacity: 0;
animation: type 4s steps(60, end) forwards;
-webkit-user-select: none;
user-select: none;
}
p:nth-child(2) {
animation-delay: 1s;
}
p:nth-child(3) {
animation-delay: 2s;
}
p:nth-child(4) {
animation-delay: 3s;
}
p:nth-child(5) {
animation-delay: 4s;
}
p:nth-child(6) {
animation-delay: 5s;
margin-bottom: 25px;
}
p:nth-child(7) {
animation-delay: 6s;
}
p:nth-child(7) span:first-child {
animation-duration: 0.8s;
}
span {
animation: blink 1.8s infinite 8s;
}
p a {
color: lime;
text-decoration: none;
}
#keyframes type {
0% {
opacity: 1;
}
100% {
width: 30em;
opacity: 1;
}
}
#keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
::selection {
background: black;
}
<p>Text first.</p>
<p>Text 2nd...</p>
<p>Text 3rd...</p>
<p>Text 4th...</p>
<p>Text 5th...</p>
<p>Text 6th...</p>
<p><span>Final/Blinking Line</span> <span>|</span>
</p>
Summary: when you execute the code..it display <p> one after another Its Ok..but the <p> should replace with one another not to display 4 lines...only last <p> blicnking line should be display in the last.
thanks

Here's a CSS version based on the posted code for some ideas:
body {
background: #000;
color: white;
padding-top: 10px;
}
.container {
position: relative; /* to host absolute child elements */
}
.temporary {
position: absolute;
width: 0px;
}
p {
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 0;
animation: type 1s steps(60, end);
-webkit-user-select: none;
user-select: none;
}
p:nth-child(2) {
animation-delay: 1s;
}
p:nth-child(3) {
animation-delay: 2s;
}
p:nth-child(4) {
animation-delay: 3s;
}
p:nth-child(5) {
animation-delay: 4s;
}
p:nth-child(6) {
animation-delay: 5s;
}
p:nth-child(7) {
animation-delay: 6s;
animation-fill-mode: forwards;
}
span {
animation: blink 1.8s infinite 8s;
}
p:nth-child(7) span:first-child {
animation-duration: 0.8s;
}
p a {
color: lime;
text-decoration: none;
}
#keyframes type {
0% {
}
30% {
width: 10em;
}
31% {
width: 30em; /* provide reading time for longer lines */
}
100% {
width: 30em;
}
}
#keyframes blink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
::selection {
background: black;
}
<h3>Demo</h3>
<div class="container">
<p class="temporary">Text first.</p>
<p class="temporary">Text 2nd...</p>
<p class="temporary">Text 3rd...</p>
<p class="temporary">Text 4th... but this is a fairly long line as well.</p>
<p class="temporary">Text 5th...</p>
<p class="temporary">Text 6th...</p>
<p class="temporary"><span>Final/Blinking Line</span> <span>|</span></p>
</div>
Changes:
Paragraphs use absolute positioning and are placed within a relatively positioned container so they occupy the same screen area. This was to prevent invisible paragraphs affecting the vertical displacement of visible ones.
The animation does not affect paragraph opacity. Animated paragraphs are specified to have zero width before and after animation. In combination with overflow: hidden, this hides paragraphs that are not being animated by default, without using opacity or display properties.
The blinking paragraph is the only one given an animation-fill-style of forwards to prevent it collapsing back to zero width when animation finishes.
To avoid multiple paragraphs being on display concurrently, the animation-delay times for paragraphs need to be not less than the animation-duration time of a single paragraph. The amended CSS rules reduce the duration to 1 second to match paragraph delay steps. But then, in order to have longer lines on display for at least 7 tenths of a second, only the first 30% of the width expansion is animated before jumping to full width. Some compromise is more or less needed to keep the animation simple, but timings and widths could always be varied according to requirements.
Blink
Simulation of CRT text terminal blinking can include a fade out effect to simulate the persistence time of the screen phosphor. Perhaps the simplest way is to provide multiple keyframes for an animation that ramp opacity up and down in accordance with graphic design.
As an example this graphic has a blink rate of 1hz, nominal duty cycle of 50% and a rapid phosphor decay of 200ms followed by a slower decay over another 300ms:
.screen {
font-family: "lucida console", "courier new", monospace;
color: #0b0;
background-color: black;
padding: 1em;
border-radius: 1em;
border: thick solid beige;
}
.fadeBlinkText {
animation-name: fade-blink;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
.fadeBlinkCursor {
animation-name: fade-blink;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
#keyframes fade-blink {
0% { opacity: 1;}
20% { opacity: 0.1;}
49.9% { opacity: 0.05;}
50% { opacity: 1;}
100% { opacity: 1;}
}
<div class=screen>
<p>Start text blinking in 2 seconds, cursor in 2.5 seconds:
<p><span class="fadeBlinkText">BLINK BLINK</span><span class="fadeBlinkCursor">|</span>
</div>

Background Fade In On Load

I'm trying to make my background fade in upon entering the website. I've tried several methods that does work. However, I'm just having trouble centering the background on different resolution. As you can currently see upon entering my website, whenever you resize your browser, the background would be in the middle at all times. Website: http://studi0.ml/ That's exactly what I'm trying to achieve, yet still have the globe to be in the middle at all times. And my background is pure CSS. Keep in mind, I just started website designing. I've been trying to code for 2-3 weeks now.
html,
body {
background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background 0.0s linear;
-moz-transition: background 0.75s 0.0s linear;
-o-transition: background 0.75s 0.0s linear;
transition: background 0.75s 0.0s linear;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

I would recommend a different setup if you want a background image to fade in on page load. You can have a separate div in a different flow than the rest of your page and have it animate to an opacity of 1 on page load.
HTML
<html>
<head> ... </head>
<body>
<div class="page-bg"></div>
</body>
</html>
CSS
html, body {
height: 100%;
width: 100%;
}
body {
position: relative;
}
.page-bg {
opacity: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed;
background-size: cover;
animation-name: fadeIn;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-duration: 1s;
animation-fill-mode:forwards;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Of course you might need to add polyfills for the animation and keyframes declarations. (i.e. -moz-animation-name, -webkit-animation-name, etc..)
Here is a working example on Plunkr. I had to swap the image you used with one with a https link so there wouldn't be an issue loading it.

If we are trying just to fade bg-color of a div, we can use:
.field-error {
color: #f44336;
padding: 2px 5px;
position: absolute;
font-size: small;
background-color: white;
}
.highlighter {
animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/
-moz-animation: fadeoutBg 3s; /* Firefox */
-webkit-animation: fadeoutBg 3s; /* Safari and Chrome */
-o-animation: fadeoutBg 3s; /* Opera */
}
#keyframes fadeoutBg {
from { background-color: lightgreen; } /** from color **/
to { background-color: white; } /** to color **/
}
#-moz-keyframes fadeoutBg { /* Firefox */
from { background-color: lightgreen; }
to { background-color: white; }
}
#-webkit-keyframes fadeoutBg { /* Safari and Chrome */
from { background-color: lightgreen; }
to { background-color: white; }
}
#-o-keyframes fadeoutBg { /* Opera */
from { background-color: lightgreen; }
to { background-color: white; }
}
<div class="field-error highlighter">File name already exists.</div>
Similarly you can achieve any style change in from and to sections like color: green to change the font-color to green, or if you want to use :
1) Fade-in: give opacity: 0 to opacity: 1
2) Fade-out: give opacity: 1 to opacity: 0
For Further details refer to https://stackoverflow.com/a/58525787/1904479

CSS Animation Fill Mode - What have I done wrong?

I need to create a rotation animation. A click event spins an element 180° to point down. Another click event spins the same element back to 0° to point up.
I have animation-fill-mode to set to forwards to preserve the last keyframe state. But it does not appear to be working. All visual elements reset to the default state.
Any ideas what I may be doing wrong?
My Codepen: http://codepen.io/simspace-dev/pen/RrpGmP
My code:
(function() {
$('#btnb').on('click', function(e) {
return $('.box').addClass('spin-counter-clockwise');
});
$('#btnf').on('click', function(e) {
return $('.box').addClass('spin-clockwise');
});
$('.box').on('webkitAnimationEnd', function(e) {
return $(e.target).removeClass('spin-counter-clockwise').removeClass('spin-clockwise');
});
}.call(this));
.box {
background: red;
position: relative;
width: 176px;
height: 176px;
margin: 40px auto;
text-align: center;
}
.box .top {
background: green;
position: absolute;
top: 0;
width: 100%;
height: 28px;
}
.box .bottom {
background: purple;
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
}
.box .caret {
color: white;
font-size: 88px;
position: absolute;
top: 42px;
left: 50px;
}
.spin-clockwise {
-moz-animation: spin 2s;
-webkit-animation: spin 2s;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spin-counter-clockwise {
-moz-animation: spin 2s reverse;
-webkit-animation: spin 2s reverse;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
body {
text-align: center;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Keyframes are not supported in IE9 and earlier</h2>
<div class="box">
<div class="top">top</div>
<div class="caret"><i class="fa fa-caret-square-o-up"></i>
</div>
<div class="bottom">bottom</div>
</div>
<p>
<button id="btnf">SPIN CLOCKWISE</button>
</p>
<p>
<button id="btnb">SPIN COUTNER CLOCKWISE</button>
</p>

TL;DR: (straight to the suggested solution)
If all you need is a rotation from 0° to 180° on the click of one button and back from 180° to 0° on the other then I would suggest using transitions instead of animations. Transitions by default produce the reverse effect and so there is no need to code for two different states (which makes it even better).
(function() {
$('#btnb').on('click', function(e) {
return $('.box').removeClass('spin');
});
$('#btnf').on('click', function(e) {
return $('.box').addClass('spin');
});
}.call(this));
.box {
background: red;
position: relative;
width: 176px;
height: 176px;
margin: 40px auto;
text-align: center;
transition: transform 1s linear;
/* add this to enable transition */
}
.box .top {
background: green;
position: absolute;
top: 0;
width: 100%;
height: 28px;
}
.box .bottom {
background: purple;
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
}
.box .caret {
color: white;
font-size: 88px;
position: absolute;
top: 42px;
left: 50px;
}
.spin {
/* this is the only thing required for rotation (along with the JS) */
transform: rotate(180deg);
}
body {
text-align: center;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Keyframes are not supported in IE9 and earlier</h2>
<div class="box">
<div class="top">top</div>
<div class="caret"><i class="fa fa-caret-square-o-up"></i>
</div>
<div class="bottom">bottom</div>
</div>
<p>
<button id="btnf">SPIN CLOCKWISE</button>
</p>
<p>
<button id="btnb">SPIN COUTNER CLOCKWISE</button>
</p>
If you were using animations only for learning purpose, the details provided below should still be useful to you in terms of understanding how animations work, what are the limitations because of it etc.
Chris' answer touches upon the reason for your problem but I thought the question merited a bit more detailed explanation of two things - (1) Why the element doesn't hold the state as at the last keyframe even though animation-fill-mode: forwards setting is applied (2) Why the same keyframe couldn't be used for the reverse animation (when the class with the original animation was not removed). I also wanted to suggest a different alternate to the whole thing and hence the separate answer.
Why does the element not hold the state as at the last keyframe even though fill mode is set to forwards?
This is because you are removing the class that adds the animation as soon as animation completes (inside the on('webkitAnimationEnd') event handler). Generally when animation-fill-mode is set to forwards, the UA uses the settings (or property-value pair) that are provided within last keyframe to maintain the state. But once the class is removed (and in-turn the animation settings), the UA does not keep track of (or know what) animations that were prior present on the element, their state and fill mode etc. Once animation is removed, the browser triggers a repaint and this will be performed based on classes that are present on the element as at the time of the repaint. Due to this, the element would snap back to its un-rotated state. You can read more about it in my answer here to a similar question (but not the same :)).
Why can't the same keyframe be used for the reverse animation (when the class which had the original animation was not removed)?
This again is because of how animations generally work. When any animation is added to an element, the UA maintains details about the animation's keyframes, its state etc as long as it is attached to the element. So, unless the class which added the forward (0° to 180°) animation is removed, the browser thinks that it has executed the animation to completion (as default iteration count is just 1) and so even when a class with the reverse animation is added, it does nothing. The only way to make it restart the animation in reverse direction is by removing the class with the forward animation and then adding the class with the reverse animation. You can have a look at this answer also for related reading.
Because of the aforementioned reasons, the only way to achieve what you need with animations is to create two different animations (or keyframes) for the forward and reverse animations, set them under two different classes and keep changing the classes using JavaScript. This whole process becomes tedious and is generally not necessary when all you need is a rotation from (0° to 180°) on the click of one button and back from (180° to 0°) on the other. This whole thing can be achieved using transitions and what makes this even better is the fact that transitions by default produce the reverse effect and so there is no need to code for two different states.
Further Reading:
What are the differences between Transitions and Animations
Choosing Transitions or Animations - When to use which?
If the need is to have continuous clockwise or counter-clockwise rotations with each button click (like in oMiKeY's answer) then I'd still recommend using transition with a bit of JS like in the below snippet. Let's leave animations for more complex stuff (and in specific stuff that'd happen without any triggers).
(function() {
var deg = 0;
$('#btnb').on('click', function(e) {
deg -= 180;
return $('.box').css('transform', 'rotate(' + deg + 'deg)');
});
$('#btnf').on('click', function(e) {
deg += 180;
return $('.box').css('transform', 'rotate(' + deg + 'deg)');
});
}.call(this));
.box {
background: red;
position: relative;
width: 176px;
height: 176px;
margin: 40px auto;
text-align: center;
transition: transform 1s linear; /* add this to enable transition */
}
.box .top {
background: green;
position: absolute;
top: 0;
width: 100%;
height: 28px;
}
.box .bottom {
background: purple;
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
}
.box .caret {
color: white;
font-size: 88px;
position: absolute;
top: 42px;
left: 50px;
}
body {
text-align: center;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Keyframes are not supported in IE9 and earlier</h2>
<div class="box">
<div class="top">top</div>
<div class="caret"><i class="fa fa-caret-square-o-up"></i>
</div>
<div class="bottom">bottom</div>
</div>
<p>
<button id="btnf">SPIN CLOCKWISE</button>
</p>
<p>
<button id="btnb">SPIN COUTNER CLOCKWISE</button>
</p>

So the root issue was the class with the animation was being removed.
I couldn't get it to work using the same keyframes, but what i did was create a new keyframes for counter clockwise, and then removed the opposite class when the buttons were clicked
Changes:
css
.spin-clockwise {
-moz-animation: spin 2s;
-webkit-animation: spin 2s;
}
.spin-fill-mode {
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.spin-counter-clockwise {
-moz-animation: spin-counter 2s;
-webkit-animation: spin-counter 2s;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes spin-counter {
from {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
js:
$('#btnb').on('click', (e)->
$('.box')
.addClass('spin-counter-clockwise')
.removeClass('spin-clockwise')
)
$('#btnf').on('click', (e) ->
$('.box')
.addClass('spin-clockwise')
.removeClass('spin-counter-clockwise')
)
And add the class spin-fill-mode to box. Though you could probably just leave the fill-mode in the animation classes...
updated codepen:
http://codepen.io/anon/pen/QypvOr

I fiddled with it for a while then decided you might need two separate rotation animations.
Check out my fiddle: http://codepen.io/anon/pen/jWBmZK
(function() {
$('#btnb').on('click', function(e) {
return $('.box')
.addClass('spin-counter-clockwise')
.toggleClass('upside-down');
});
$('#btnf').on('click', function(e) {
return $('.box')
.addClass('spin-clockwise')
.toggleClass('upside-down');
});
$('.box').on('webkitAnimationEnd', function(e) {
return $(e.target).removeClass('spin-counter-clockwise').removeClass('spin-clockwise');
});
}.call(this));
.box {
background: red;
position: relative;
width: 176px;
height: 176px;
margin: 40px auto;
text-align: center;
}
.box .top {
background: green;
position: absolute;
top: 0;
width: 100%;
height: 28px;
}
.box .bottom {
background: purple;
position: absolute;
bottom: 0;
width: 100%;
height: 28px;
}
.box .caret {
color: white;
font-size: 88px;
position: absolute;
top: 42px;
left: 50px;
}
.upside-down {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.spin-clockwise.upside-down {
-moz-animation: spin 2s;
-webkit-animation: spin 2s;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spin-counter-clockwise {
-moz-animation: spin 2s reverse;
-webkit-animation: spin 2s reverse;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spin-clockwise {
-moz-animation: back-spin 2s;
-webkit-animation: back-spin 2s;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spin-counter-clockwise.upside-down {
-moz-animation: back-spin 2s reverse;
-webkit-animation: back-spin 2s reverse;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes back-spin {
from {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
body {
text-align: center;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h2>Keyframes are not supported in IE9 and earlier</h2>
<div class="box">
<div class="top">top</div>
<div class="caret"><i class="fa fa-caret-square-o-up"></i>
</div>
<div class="bottom">bottom</div>
</div>
<p>
<button id="btnf">SPIN CLOCKWISE</button>
</p>
<p>
<button id="btnb">SPIN COUTNER CLOCKWISE</button>
</p>
</body>
</html>