css-animations

i am trying to implement css3 animations.... i am planning to change my aimations affects continuously in cycle but the problem is after one cycle it stops in red color it does not change its color further.... how to continue the cycle... http://jsfiddle.net/9CZFS/ providing my code below div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100%

I have a small hobby project in which I try to build a matrix rain: . See demo here. Or this JSFiddle My question is: how can I make this more efficient, as I can see it gets slow when I add a lot of columns. I have implemented it as rendering a lot of absolute positioned div s that are animated. Here is my CSS: div { position:absolute; width:1em; display:inline-block; color: black; animation-name: example; animation-duration: 2s; text-shadow: none; } @keyframes example { 0% {color: white; text-shadow: -1px 1px 8px white;} 15% {color: #5f5 ; text-shadow: -1px 1px 8px #5f5 ;} 100% {color: black

I have an image that swings using CSS rotate animation. I would like to stop it smoothly (and put it back to its original position when clicking on another element but without getting the jumpy stop feeling). It seems that the expected behaviour only happens on the first iteration of the animation but not on the upcoming ones (this is when clicking on the "slow" button during the first 2 seconds) Here is a sample code https://jsfiddle.net/pbarrientos/5v3xwak6/ I have already tried adding animation-iteration-count: 1; and adding/removing classes. var css = { '-webkit-animation-iteration-count':

I have a css transition that moves an element on hover and an animation that rotates the element on hover too. There's a delay on the animation equal to the transition duration so that after it's transitioned to it's correct position, the animation starts. And it works nice, however, when we mouse off, the animation stops but it doesn't transition back down. Is it possible to get it to transition back after we mouse off and the animation ends? You can see an example here: http://codepen.io/jhealey5/pen/zvXBxM Simplified code here: div { width: 200px; height: 200px; margin: 40px auto;

I am trying to animate my text to appear from left to right on page load. This is done by simply setting @keyframes to transition from 0% max-width to 100%. However my text-align settings seem to be applied only after the animation is complete. I just want the text content itself to reveal itself where I intend it to be, and assumed my code is correct. Am I missing something obvious here? I'm fairly new to CSS , but my research doesn't seem to indicate there are inherit properties of animation or text-align that should cause this. Code example below. Thanks! @keyframes leftright { 0% { max

I want to make an svg picture file containing some “card flip”-style animations, using css with a stylesheet embedded in the svg file. In Chrome, at least two problems may come up, depending on the exact code used: either the front side of the card remains on visible even when flipped, obscuring the backside, or the back side of the card is wrongly positioned. Here is a simplified version of what I'm trying to achieve: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org

I have been trying to figure out how to have animations occur when it is scrolled into view but with little to no luck. I found a JQuery plugin "Waypoints" but I lack the skills to utilize it. I am trying to use CSS3 keyframes that animate when they are scrolled into view. I made a breakthrough and am close to what I want to accomplish but it isn't quite where I want it. I have a class named "bounceinright" that makes the item bounce in to the right of the screen. Here is the CSS for that: @-webkit-keyframes bounceinright { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% {