提高变换动画的动画速度(CSS)

Question

我正试图找到一种在0.05秒内加快变换(绕y轴翻转(的方法。基本上，图像在0.05秒内翻转。然而，翻转动画并没有改变，尽管我在CSS中做了什么。请帮助

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'>

JS-

<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>

感谢

Answer 1

您可以同时运行两个动画。这个片段将左侧/顶部的动画保持在10秒，并引入了0.5秒的旋转动画。(在0.05秒时，旋转会产生非常闪烁的结果，这似乎不是你想要的(。

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%,
49.99%,
100% {
transform: rotateY(0);
}
50%,
99.99% {
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'>

更新：要求已经明确——图像要瞬间翻转，但每半秒就会回到初始方向。

已更改名为rotate的关键帧，使其在动画时间的一半时间内保持0度旋转，翻转180度并在后半部分保持0度。