Increasing animation speed (CSS) of transform animation-CodePudding

I'm trying to find a way to speed up the transform (flip about the y axis) in 0.05 seconds. Basically, the image flips in 0.05 seconds. The flip animation however does not change despite what I did in CSS. Please help

CSS

<style> 

.a {
  width: 50px;
  height: 50px;

  position: relative;
  animation-name: box;
  animation-duration: 10s;
  transition: transform 0.05s; 
 
 animation-iteration-count: infinite;
  animation-direction: alternate;


}

@keyframes box {
  0%   { left: var(--rando0); top: var(--rando1); transform: rotateY(180deg);}
  25%  {   transform: rotateY(180deg) left: var(--rando2); top: var(--rando3);}
  50%  { left: var(--rando4); top: var(--rando5);  transform: rotateY(180deg);}
  75%  {   transform: rotateY(180deg) left: var(--rando6); top: var(--rando7);}
  100% { left: var(--rando8); top: var(--rando9);  transform: rotateY(180deg);}


}

HTML

<img src="image.gif" alt="prgm" class='a left'  class='character'>

<script>
const root = document.querySelector(":root"); // we first get the root element
for(let i = 0; i < 10; i  ) {
  root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200)   1}px`);
}
</script>

Thanks

CodePudding user response：

Speed because why not? Change animation-duration.

const root = document.querySelector(":root"); // we first get the root element
for(let i = 0; i < 10; i  ) {
  root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200)   1}px`);
}

.a {
  width: 50px;
  height: 50px;

  position: relative;
  animation-name: box;
  animation-duration: 0.5s;
 
 animation-iteration-count: infinite;
  animation-direction: alternate;


}

@keyframes box {
  0%   { left: var(--rando0); top: var(--rando1); transform: rotateY(180deg);}
  25%  {   transform: rotateY(180deg) left: var(--rando2); top: var(--rando3);}
  50%  { left: var(--rando4); top: var(--rando5);  transform: rotateY(180deg);}
  75%  {   transform: rotateY(180deg) left: var(--rando6); top: var(--rando7);}
  100% { left: var(--rando8); top: var(--rando9);  transform: rotateY(180deg);}


}

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzhbV48pXypX9otxEVYrZ1etEOZqym7693twATGzSGqg&s" alt="prgm" class='a left'  class='character'>

CodePudding user response：

You can have two animations running at the same time. This snippet keeps the left/top animation at 10s and introduces a rotate animation at 0.5s. (At 0.05s the rotation gives very flashing result which didn't seem to be likely what you wanted).

const root = document.querySelector(":root"); // we first get the root element
for (let i = 0; i < 10; i  ) {
  root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200)   1}px`);
}

.a {
  width: 50px;
  height: 50px;
  position: relative;
  animation-name: box, rotate;
  animation-duration: 10s, 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes rotate {
  0%,
  100% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
}

@keyframes box {
  0% {
    left: var(--rando0);
    top: var(--rando1);
  }
  25% {
    left: var(--rando2);
    top: var(--rando3);
  }
  50% {
    left: var(--rando4);
    top: var(--rando5);
  }
  75% {
    left: var(--rando6);
    top: var(--rando7);
  }
  100% {
    left: var(--rando8);
    top: var(--rando9);
  }
}

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzhbV48pXypX9otxEVYrZ1etEOZqym7693twATGzSGqg&s" alt="prgm" class='a left' class='character'>