css-animations

问题 can anyone explain how to add the Ken Burns effect to this slider? I tried adding the following to the keyframes but it didn't work: 95% { transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px); animation-timing-function: ease-in; opacity: 1; } 100% { transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px); opacity: 0; } what is the explanation that it doesn't work on this case? Here is the original CSS code only for simplicity: $main: #777; $back: #aaa; $accent: hsl(220,50%

问题 can anyone explain how to add the Ken Burns effect to this slider? I tried adding the following to the keyframes but it didn't work: 95% { transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px); animation-timing-function: ease-in; opacity: 1; } 100% { transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px); opacity: 0; } what is the explanation that it doesn't work on this case? Here is the original CSS code only for simplicity: $main: #777; $back: #aaa; $accent: hsl(220,50%

问题 Something this simple should be easily accomplished, yet I'm pulling my hair out over how complicated it is. All I want to do is animate the mounting & unmounting of a React component, that's it. Here's what I've tried so far and why each solution won't work: ReactCSSTransitionGroup - I'm not using CSS classes at all, it's all JS styles, so this won't work. ReactTransitionGroup - This lower level API is great, but it requires you to use a callback when the animation is complete, so just using

问题 I have a heart svg path like so: <svg viewBox="0 0 100 100"> <path className="" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" /> </svg> And I'd like to add a

问题 I have a heart svg path like so: <svg viewBox="0 0 100 100"> <path className="" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" /> </svg> And I'd like to add a

问题 I made this animation and it's working like a charm in every browser but IE and Edge. You can see the page here https://jsfiddle.net/03ddygdx/ .progress-container { position: relative; } .background-progress-bar, .progress-bar { width: 100%; height: 10px; top: 0px; left: 0px; position: absolute; } .background-progress-bar { background-color: pink; z-index: 8; } .progress-bar { background-color: red; z-index: 9; } .indeterminate { animation: indeterminate 2.5s infinite linear; } @keyframes

问题 I made this animation and it's working like a charm in every browser but IE and Edge. You can see the page here https://jsfiddle.net/03ddygdx/ .progress-container { position: relative; } .background-progress-bar, .progress-bar { width: 100%; height: 10px; top: 0px; left: 0px; position: absolute; } .background-progress-bar { background-color: pink; z-index: 8; } .progress-bar { background-color: red; z-index: 9; } .indeterminate { animation: indeterminate 2.5s infinite linear; } @keyframes

问题 I made this animation and it's working like a charm in every browser but IE and Edge. You can see the page here https://jsfiddle.net/03ddygdx/ .progress-container { position: relative; } .background-progress-bar, .progress-bar { width: 100%; height: 10px; top: 0px; left: 0px; position: absolute; } .background-progress-bar { background-color: pink; z-index: 8; } .progress-bar { background-color: red; z-index: 9; } .indeterminate { animation: indeterminate 2.5s infinite linear; } @keyframes

问题 I have been experimenting with jQuery animate vs CSS3 animate, I alse wanted to test the 2D / 3D translate to see which is better. Does anyone know why my CSS3 translate3d doesn't work? I've tried it on desktop and mobile. Any help appreciated jsFiddle HTML <div id="container1" class="container">transition</div> <div id="container2" class="container">translate</div> <div id="container3" class="container">translate3d</div> <div id="container4" class="container">jQ animate</div> CSS .container

问题 I need to execute an animation on a div for properties scaleZ() and translateZ() using CSS Animations. The following code works fine when initial and last keyframes values in the animation for transform property are in a similar "format": 0% is transform: rotateY(-179deg) scaleZ(2) translateZ(200px); 100% is transform: rotateY(179deg) scaleZ(2) translateZ(200px); console.clear(); document.addEventListener('DOMContentLoaded', () => { let content1 = document.querySelector('#content1'); var