css-animations

If I have a CSS keyframe animation like this @keyframes flash-red { 50% { background: #f00; } } #goflash.anm-flash { animation-name: flash-red; animation-duration: .5s; background: rgba(255, 0, 0, 0); } Then I can always trigger the animation like this: var gf = document.querySelector("#goflash"); gf.classList.remove("anm-flash"); setTimeout(function() { gf.classList.add("anm-flash"); }, 50); Is there any way to override the animation-duration/animation-timing-function to be dependent on JavaScript? I'd like to be able to say something like gf.animate("flash-red", "50%") to make the background

I'm using CSS transforms/animations with font-face ( twitter bootstrap/font-awesome ) to produce a spinner gif-like icon. The problem is that the icon wobbles as it revolves around 360degrees. See this JSFiddle to see what I mean. Does anyone know how to make it not wobble? Or at least make it rotate a little more smoothly? Here's the code for that below: CSS: i.icon-repeat { -webkit-animation: Rotate 500ms infinite linear; -moz-animation: Rotate 500ms infinite linear; -ms-animation: Rotate 500ms infinite linear; -o-animation: Rotate 500ms infinite linear; animation: Rotate 500ms infinite

So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript. Today i wanted to create something like this: Text moving from left to right I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent div, and i wanted to let text text "float" though the parent div: actually animating the div from left:0

I'm trying to reverse how this SVG line animates. I need the line to draw from left to right but can only get it to work right to left. I tried changing the end point in illustrator but this only led to it drawing from both sides. How do I do this? You can see the animation here: http://mckeever02.github.io/voxbit/ This is the SVG: <svg viewBox="0 0 759.7 234.2"> <path class="phone-line" stroke="#fff" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335 M755.6,229.7H540.1c-31.9,0-57.6-27

What I'm trying to achieve is this animation Link to the animation is Material Design What am I missing?How can I achieve the above result without using position:absolute for the items what I've done so far HTML: <div class="product-list " id="product_list"> <div class="item "> <a href="#" data-id="228"> <div class="item-top"> <img width="211" height="165" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product66_26"> </div> <div class="item-bottom"> <div class="item-product-title">Unicity Activate</div> </div> </a> </div> <div class="item "> <a href="#" data-id="227">

I neeed to move an element on sine wave or path as shown in above image. I made something. But it is not working as I want. img { position:absolute; animation: roam infinite; animation-duration: 15s; } @keyframes roam { 0% { left: 50px; top:100px } 10%{ left:100px; top:100px } 20%{ left:200px; top:200px } 30%{ left:300px; top:50px } 40%{ left:400px; top:200px } } <img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png"> You can move an element on a sine path with 2 CSS keyframe animations . The point is to translate left right with a linear timing

I just set an animation to a div and it succeeded. Now I want to get it proved because its delay is too short! so how can I add the delayed time between animation (0% to 25%) and animation (25% to 50%) here is the code: #flow{ position:absolute; -webkit-animation:mymove 10s ease-in-out; -webkit-animation-iteration-count:3; -webkit-animation-delay:1s; } @-webkit-keyframes mymove { 0%{left:5px;} 25%{left:127px;} 50%{left:249px;} 75%{left:371px;} 100%{left:5px;} } everyone!Thanks for your attention !I have found the answer but I don't know the Api of the definition of percentage in keyframes!And