Pure CSS Rotate Animation Broken While in Infinite Loop

Pure CSS rotate animation broken while in infinite loop

First I would simplify your code and use less HTML/CSS. Then I would consider only one animation where I will have both states.

The animation will be: the first flip then we keep the first color then the second filp then we keep the second color. It's divided into 12 time slots (1 + 5 + 1 + 5) (1+5 = 6 which is the number of the divs)

If the duration is S then the delay should be multiple of one slot S/12. Notice that I have used the perspective within the transform to avoid an extra element:

#loader {  width: 240px;  height: 100px;  display: flex;  flex-wrap: wrap;}
#loader>div {  width: calc(100%/3);  position: relative;  transform-style: preserve-3d;  animation: spin 6s linear var(--delay, 0s) infinite;}
#loader>div:before,#loader>div:after {  content: "";  position: absolute;  top:0;  left:0;  width: 100%;  height: 100%;  backface-visibility: hidden;  background-color: var(--front, #db9834);}
#loader>div:after {  background-color: var(--back, #3498db);  transform: rotateY(180deg);}

/* -------------------------------------------------------- */
#loader>div:nth-child(2) {  --front: #db8834;  --back: #3488db;  --delay: 0.5s;}
#loader>div:nth-child(3) {  --front: #db7834;  --back: #3478db;  --delay: 1s;}
#loader>div:nth-child(4) {  --front: #db6834;  --back: #3468db;  --delay: 1.5s;}
#loader>div:nth-child(5) {  --front: #db5834;  --back: #3458db;  --delay: 2s;}
#loader>div:nth-child(6) {  --front: #db4834;  --back: #3448db;  --delay: 2.5s;}

@keyframes spin {  0% {    transform:perspective(500px) rotateY(0deg);  }  8.33%,  50%{    transform:perspective(500px) rotateY(180deg);  }  58.33% {    transform:perspective(500px) rotateY(0deg);  }}

<div id="loader">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

I'm trying to correct the animation duration and timeline of infinite flip, rotation, spin and disappearance of three images in pure CSS

I'm not sure I understand your image since it says the second image should disappear but it also says the animation is infinite. I hope it's working as you intended, if not just leave a comment on what needs to be fixed.

I'm using the animationend event to control the animations.

var counter = 1;var div = document.querySelector('.flipping-images');var images = document.querySelectorAll('.flipping-images img');
var showNext = function () {  counter++;  if (counter > 3) counter = 1;  div.classList.remove('image1', 'image2', 'image3')  div.classList.add('image'+counter);};
for (var img of images) {  img.addEventListener('animationend', showNext);  img.addEventListener('click', showNext);}
document.querySelector('#next').addEventListener('click', showNext);

.flipping-images {  perspective: 300px;}.flipping-images img {  display: none;  animation: rotate 5s linear 1;}.flipping-images.image1 img:nth-child(1),.flipping-images.image2 img:nth-child(2),.flipping-images.image3 img:nth-child(3) {  display: block;}.flipping-images.image2 img:nth-child(2) {  animation: rotate 5s linear infinite;}@keyframes rotate {  0% { transform: rotateY(-45deg); }  100% { transform: rotateY(45deg); }}button {  margin: 1em;}

<div class="flipping-images image1">  <img src="https://via.placeholder.com/100x100/fdc34f/FEFEFE?text=1">  <img src="https://via.placeholder.com/100x100/3e72ff/FEFEFE?text=2">  <img src="https://via.placeholder.com/100x100/222222/FEFEFE?text=3"></div>
<button id="next">Next</button>

CSS3 Continuous Rotate Animation (Just like a loading sundial)

Your issue here is that you've supplied a -webkit-TRANSITION-timing-function when you want a -webkit-ANIMATION-timing-function. Your values of 0 to 360 will work properly.

Continuous CSS rotation animation on hover, animated back to 0deg on hover out

The solution is to set the default value in your .elem.
But this annimation work fine with -moz but not yet implement in -webkit

Look at the fiddle I updated from yours :
http://jsfiddle.net/DoubleYo/4Vz63/1648/

It works fine with Firefox but not with Chrome

.elem{    position: absolute;    top: 40px;    left: 40px;    width: 0;     height: 0;    border-style: solid;    border-width: 75px;    border-color: red blue green orange;    transition-property: transform;    transition-duration: 1s;}.elem:hover {    animation-name: rotate;     animation-duration: 2s;     animation-iteration-count: infinite;    animation-timing-function: linear;}
@keyframes rotate {    from {transform: rotate(0deg);}    to {transform: rotate(360deg);}}

<div class="elem"></div>

CSS endless rotation animation

Works in all modern browsers

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

CSS animation in Windows 8.1 application not working

It turned out nothing was wrong with the animation declaration itself, as expected. We had just wrapped the keyframes definition inside of a media query. Apparently, even though the media query was valid and was being correctly applied, neither IE11 nor Windows 8.1 would render the animation.

Long story short, moving the keyframes definition outside of the media query resolved the issue.

---

Related Topics