In Firefox in version 59.0.1 on Windows 10, the animation slows down. In Chrome and Edge there are no such brakes.
Brakes - jerky changes of properties. Also, sometimes .stack__deco elements that are "behind" climbs on the leading edge during an animation.
How can I fix it? Or am I not using animation correctly?
Example 1 With transition .
.stack { position: relative; max-width: 100%; } .stack .stack-image, .stack .stack-image-content { position: relative; display: inline-block; font-size: 0; max-width: 100%; } .stack .stack-image-content { overflow: hidden; } .stack .stack-image-content img, .stack .stack-image-content svg { max-width: none; position: relative; } .hover-stack { position: relative; transform-style: preserve-3d; perspective: 800px; perspective-origin: 50% 200%; } .hover-stack .hover-stack-image-container { transform-origin: 50% 100%; } .hover-stack .stack__deco { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 50% 100%; border-radius: inherit; } .hover-stack.DenebFx { perspective: none; perspective-origin: 50% 100%; } .hover-stack.DenebFx .stack__deco { transform-origin: 50% 50%; } .hover-stack.DenebFx .hover-stack-image-container { transform-origin: 50% 50%; } .hover-stack.PolarisFx { perspective-origin: 200% -100%; } .hover-stack.PolluxFx { perspective: 1000px; perspective-origin: 50% -70%; } .hover-stack.PolluxFx .stack__deco { transform-origin: 50% 50%; } .hover-stack.PolluxFx .hover-stack-image-container { transform-origin: 50% 50%; } .hover-stack.AltairFx { perspective-origin: 50% -50%; } .hover-stack.RigelFx .stack__deco { opacity: 0; transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1); transition-property: transform; transform: translateY(0) translateZ(0); } .hover-stack.RigelFx .hover-stack-image-container { transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1); transform: translateY(0) translateZ(0); } .hover-stack.RigelFx .hover-stack-image-container img, .hover-stack.RigelFx .hover-stack-image-container svg { transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1); transform: translateY(0) translateZ(0); } .hover-stack.RigelFx.hover-stack-run-animate .stack__deco:nth-child(1), .hover-stack.RigelFx:hover .stack__deco:nth-child(1) { transform: translateY(0) translateZ(0); opacity: 0.1; } .hover-stack.RigelFx.hover-stack-run-animate .stack__deco:nth-child(2), .hover-stack.RigelFx:hover .stack__deco:nth-child(2) { transform: translateY(-10px) translateZ(10px); opacity: 0.2; } .hover-stack.RigelFx.hover-stack-run-animate .stack__deco:nth-child(3), .hover-stack.RigelFx:hover .stack__deco:nth-child(3) { transform: translateY(-20px) translateZ(20px); opacity: 0.3; } .hover-stack.RigelFx.hover-stack-run-animate .stack__deco:nth-child(4), .hover-stack.RigelFx:hover .stack__deco:nth-child(4) { transform: translateY(-30px) translateZ(30px); opacity: 0.4; } .hover-stack.RigelFx.hover-stack-run-animate .hover-stack-image-container, .hover-stack.RigelFx:hover .hover-stack-image-container { transform: translateY(-40px) translateZ(40px); } .hover-stack.hover-stack-enable-scale.RigelFx.hover-stack-run-animate .hover-stack-image-container img, .hover-stack.hover-stack-enable-scale.RigelFx:hover .hover-stack-image-container img, .hover-stack.hover-stack-enable-scale.RigelFx.hover-stack-run-animate .hover-stack-image-container svg, .hover-stack.hover-stack-enable-scale.RigelFx:hover .hover-stack-image-container svg { transform: scale(0.7); } <br> <br> <br> <br> <div class="stack" style="text-align: center;"> <div class="stack-image selectable hover-stack-enable-scale hover-stack RigelFx" il-type="settings" settings="data.icon" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" title="" alt=""> <div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div> <div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div> <div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div> <div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div> <div class="stack-image-content hover-stack-image-container" style="width: 200px; height: 200px; border-radius: 50%;"><img src="https://vemco.com/wp-content/uploads/2012/09/image-banner2.jpg" style="border-radius: 50%; width: 285.714px; height: 285.714px; left: -42.8571px; top: -42.8571px;"></div> </div> </div> Example 2 With animation .
.stack { position: relative; max-width: 100%; } .stack .stack-image, .stack .stack-image-content { position: relative; display: inline-block; font-size: 0; max-width: 100%; } .stack .stack-image-content { overflow: hidden; } .stack .stack-image-content img, .stack .stack-image-content svg { max-width: none; position: relative; } .hover-stack { position: relative; transform-style: preserve-3d; perspective: 800px; perspective-origin: 50% 200%; } .hover-stack .hover-stack-image-container { transform-origin: 50% 100%; } .hover-stack .stack__deco { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 50% 100%; border-radius: inherit; } .hover-stack.DenebFx { perspective: none; perspective-origin: 50% 100%; } .hover-stack.DenebFx .stack__deco { transform-origin: 50% 50%; } .hover-stack.DenebFx .hover-stack-image-container { transform-origin: 50% 50%; } .hover-stack.PolarisFx { perspective-origin: 200% -100%; } .hover-stack.PolluxFx { perspective: 1000px; perspective-origin: 50% -70%; } .hover-stack.PolluxFx .stack__deco { transform-origin: 50% 50%; } .hover-stack.PolluxFx .hover-stack-image-container { transform-origin: 50% 50%; } .hover-stack.AltairFx { perspective-origin: 50% -50%; } .hover-stack.AltairFx .stack__deco { opacity: 0; } @keyframes altair-image { 0% { transform: translateZ(0) rotateX(0); } 20% { transform: translateZ(18px) rotateX(-24deg); } 100% { transform: translateZ(12px) rotateX(-16deg); } } @keyframes altair-2 { 0% { transform: translateZ(0) rotateX(0); } 20% { transform: translateZ(6px) rotateX(-8deg); } 100% { transform: translateZ(3px) rotateX(-4deg); } } @keyframes altair-3 { 0% { transform: translateZ(0) rotateX(0); } 20% { transform: translateZ(9px) rotateX(-12deg); } 100% { transform: translateZ(6px) rotateX(-8deg); } } @keyframes altair-4 { 0% { transform: translateZ(0) rotateX(0); } 20% { transform: translateZ(12px) rotateX(-16deg); } 100% { transform: translateZ(9px) rotateX(-12deg); } } .hover-stack.AltairFx .hover-stack-image-container img, .hover-stack.AltairFx .hover-stack-image-container svg { transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1); } .hover-stack.AltairFx.hover-stack-run-animate .stack__deco:nth-child(1), .hover-stack.AltairFx:hover .stack__deco:nth-child(1) { opacity: 0.2; transition-delay: 120ms; } .hover-stack.AltairFx.hover-stack-run-animate .stack__deco:nth-child(2), .hover-stack.AltairFx:hover .stack__deco:nth-child(2) { opacity: 0.4; animation: altair-2 1400ms 90ms cubic-bezier(0.19, 1, 0.22, 1) forwards; } .hover-stack.AltairFx.hover-stack-run-animate .stack__deco:nth-child(3), .hover-stack.AltairFx:hover .stack__deco:nth-child(3) { opacity: 0.6; animation: altair-3 1400ms 60ms cubic-bezier(0.19, 1, 0.22, 1) forwards; } .hover-stack.AltairFx.hover-stack-run-animate .stack__deco:nth-child(4), .hover-stack.AltairFx:hover .stack__deco:nth-child(4) { opacity: 0.8; animation: altair-4 1400ms 30ms cubic-bezier(0.19, 1, 0.22, 1) forwards; } .hover-stack.AltairFx.hover-stack-run-animate .hover-stack-image-container, .hover-stack.AltairFx:hover .hover-stack-image-container { animation: altair-image 1400ms cubic-bezier(0.19, 1, 0.22, 1) forwards; } .hover-stack.hover-stack-enable-scale.AltairFx.hover-stack-run-animate .hover-stack-image-container img, .hover-stack.hover-stack-enable-scale.AltairFx:hover .hover-stack-image-container img, .hover-stack.hover-stack-enable-scale.AltairFx.hover-stack-run-animate .hover-stack-image-container svg, .hover-stack.hover-stack-enable-scale.AltairFx:hover .hover-stack-image-container svg { transform: scale(0.7); } <br> <br> <br> <br> <div class="stack" style="text-align: center;"> <div class="stack-image selectable hover-stack-enable-scale hover-stack AltairFx" il-type="settings" settings="data.icon" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" title="" alt=""> <div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div> <div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div> <div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div> <div class="stack__deco" style="border-radius: 50%; background-color: rgb(61, 115, 133);"></div> <div class="stack-image-content hover-stack-image-container" style="width: 200px; height: 200px; border-radius: 50%;"><img src="https://vemco.com/wp-content/uploads/2012/09/image-banner2.jpg" style="border-radius: 50%; width: 285.714px; height: 285.714px; left: -42.8571px; top: -42.8571px;"></div> </div> </div> 