css-animations

问题 Looking for help! I'm having a flickering issue with the keyframe animation I made for the hover state. I'm using Squarespace and adding custom code to the site. Designer by trade so forgive my code, I'm stuck. View site here: https://dingbat.co/new-fonts Flicker Issue on Hover img { max-width:100%; } img:hover{ opacity: 1 !important; animation: bruxism 1s infinite; animation-timing-function: steps(100); } @keyframes bruxism{ 0% { content: url('https://static1.squarespace.com/static

问题 Looking for help! I'm having a flickering issue with the keyframe animation I made for the hover state. I'm using Squarespace and adding custom code to the site. Designer by trade so forgive my code, I'm stuck. View site here: https://dingbat.co/new-fonts Flicker Issue on Hover img { max-width:100%; } img:hover{ opacity: 1 !important; animation: bruxism 1s infinite; animation-timing-function: steps(100); } @keyframes bruxism{ 0% { content: url('https://static1.squarespace.com/static

问题 I am simulating the flip effect on a card. The card is a div with an image inside. I would like to change that image when the animation is exactly at its midpoint (i.e. when the card is exactly rotated 90 degrees). The timing function of the transition is set to ease-out. So my question is, at what fraction of the set transition duration does an ease-out animation reach its midpoint? 回答1: IF you refer to the MDN page you can find the graphic there: The red lines mean that when you are at 50%

问题 I'm adding animation whenever submit button clicks without selecting any option. but It is working only for the first time. const select_node = document.getElementById("st1"); // html select tag const submit_btn = document.getElementById("submit_btn"); // html submit button submit_btn.addEventListener('click',(e)=>{ e.preventDefault(); if(select_node.classList.contains('options_not_selected')){ select_node.classList.remove('options_not_selected'); } if(select_node[select_node.selectedIndex]

问题 I'm using react transition group to handle animated CSSTransitions when a component is rendered. I want a simple fade in of a component. The transition out seems to work properly, but the in transition does not. If I put a debugger on the onEnter property, I can see that the transition actually "should" work as expected. The enter-active state is triggered, the element starts at 0.1 opacity, and if I resume the debugger, the transition takes place. But without the debugger, when the component

问题 I'm trying to have an ellipsis animate, and was wondering if it was possible with CSS animations... So it might be like Loading... Loading.. Loading. Loading... Loading.. And basically just continue like that. Any ideas? Edit: like this: http://playground.magicrising.de/demo/ellipsis.html 回答1: How about a slightly modified version of @xec's answer: http://codepen.io/thetallweeks/pen/yybGra HTML A single class added to the element: <div class="loading">Loading</div> CSS Animation that uses

问题 I just realized that the latest version of Safari (v13.1) that comes with macOs 10.15.4 and iOS 13.4 doesn't support css animations in SVG files anymore. I use this trick to display a loading animation on my portfolio. Now only the first frame of the sag file is display and the animation doesn't start. https://jbkaloya.com No issues with Chrome or Firefox tho. EDIT Here's the corresponding CSS properties in where the file is embedded in the page .loading { background-color: $black-color;

问题 I have created sample CodePen here. I tried below but didn't work. .elementToFadeInAndOut { width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; } @-webkit-keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } @keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; } } As you will see this sample has 3 images. I give them id = "imge1" , "imge2" , "imge3" img3 keeps rotating using keyframe.

问题 This question already has an answer here : Seek to specific keyframe in css3 animation (1 answer) Closed 3 years ago . I have a CSS keyframe animation that, in itself, is pretty ordinary. However, I want to be able to force the animation to be at a particular frame. Something like anim.setProgress(0.13) , which would set the animation to be 13% along. How can I do that? Note that I don't just want to start the animation at an arbitrary point. I want to be able to interrupt it and say "go back

问题 This question already has an answer here : Seek to specific keyframe in css3 animation (1 answer) Closed 3 years ago . I have a CSS keyframe animation that, in itself, is pretty ordinary. However, I want to be able to force the animation to be at a particular frame. Something like anim.setProgress(0.13) , which would set the animation to be 13% along. How can I do that? Note that I don't just want to start the animation at an arbitrary point. I want to be able to interrupt it and say "go back