css-animations

I have an tag which is displayed as a block. On page load, its width is increased by a css animation from zero to some percentage of the containing div (the fiddle contains a MWE, but there is more than one link in this div, each with a different width). On hover, I want it to change colour, change background colour, and also expand to 100% of the div, using a CSS transition . The colour and background colour bit is working, but it seems to ignore the width transition. Snippet: .home-bar { text-decoration: none; background-color: white; color: #5e0734; display: block; -webkit-animation

In the latest stable release of Google Chrome: Version 31.0.1650.63 m (Canary also) there is still a bug when there is a border radius and transition involved. Content inside the element that has a border radius applied doesn't get clipped until the end of the animation. I've managed to work it out by transitioning "top" and "left" properties instead of translateX / translateY http://codepen.io/iki_xx/pen/wCFuo However I can't seem to find a substitute for animating opacity. http://codepen.io/iki_xx/pen/mspgE Is there a fix for opacity? You can fix it 2 ways: .thumb { position:relative;

I want to have an expanding radius that starts from the center of the div instead of it starting on the top left of the div . Imagine the button has a pulsing outline that goes outwards. That pulsing outline should start from the middle of the div and go out. See example here: https://jsbin.com/dinehoqaro/edit?html,css,output You can see that the expansion is starting from the top left. .circle { background-color: white; border: 1px solid red; border-radius: 50%; width: 50px; height: 50px; animation: pulse 1s infinte; -webkit-animation: pulse 1.2s infinite; } button { background-color: green;

I would like to build a animated spinner with CSS3. It should behave like this : After the last state it should start again like in the first state. I managed to create circles using the technique explained here : stackoverflow question Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either. CSS3 spinner This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the

Looking to optimize this infinite scrolling effect, however I'm not entirely sure how to create a smooth transition when looping back to the original image. At 10s it's hardly noticeable, however at 30s it's more evident. I'm assuming it has something to do with the ending position margin, but can't quite pinpoint it. What should the value of the last frame be? JSFiddle HTML: <div class="container"> <div class="photobanner"> <img class="first" src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150

I would like my GWT widget to be notified when its CSS animation is over. In plain HTML/Javascript this is easily done by registering an event handler like so: elem.addEventListener("webkitAnimationEnd", function(){ // do something }, false); // add more for Mozilla etc. How can I do this in GWT? This type of event is unknown to GWT's DOMImpl classes, so I keep getting an error " Trying to sink unknown event type webkitAnimationEnd ". Thanks! Rok Strniša You can always write some of the native (JavaScript) code yourself: public class CssAnimation { public static native void registerCssCallback

Let's say we have an animation like here: http://jsfiddle.net/utterstep/JPDwC/ Layout: <div>back</div> <div class="animating"></div> <div>forward</div> And corresponding CSS: @keyframes someanimation { 0% { width: 100px; } 50% { width: 200px; } 100% { width: 100px; } } .animating { width: 200px; height: 200px; background-color: red; animation: someanimation 5s infinite; } And I want to go to the next or previous animation state when I press back or forward . There can be more than one object and I would like to switch their animation states at the same time. Is it someway possible via CSS or