css-animations

I'm creating a CSS keyframe animation to have an element appear as if it is casually/slowly floating around a bit. It's nested in parents, one which uses translateX() to slowly move it left and right, and one which uses translateY() to slowly and independently move it up and down. Chrome and Safari render this perfectly, giving it a gradual swaying movement. It smooths the animation (perhaps using sub-pixel smoothing?) so that everything appears very smooth. Firefox however, animates it pixel by pixel, so rather than smoothly swaying about, you can see it jump at every pixel. View the JSFiddle

I have a login form on a site I am currently building, and I also have a signup form. I would like to add some fancy animation to it by rotating the div to the other side when the "Sign up" link is clicked. I want the login form to be on the front side, and the signup form on the back. I would rather not use javascript, but if necessary, I will. Thanks for any possible answers! You can do the animation using CSS transition and transform: rotateY() with no Javascript, other than triggering the animation by adding a class. Demo: http://jsfiddle.net/ThinkingStiff/9UMFg/ CSS: .flip { backface

Context: According to the Animation Spec : If a ‘0%’ or ‘from’ keyframe is not specified, then the user agent constructs a ‘0%’ keyframe using the computed values of the properties being animated. If a ‘100%’ or ‘to’ keyframe is not specified, then the user agent constructs a ‘100%’ keyframe using the computed values of the properties being animated. This can lead to two different interpretations: A) Declare the property in the class and not in the 0% or from keyframe. B) Declare the property in the class and in the 0% or from keyframe. Simplified Example: p:first-of-type { opacity: 0;

I was going thru some single page website examples and found this: http://alwayscreative.net/ . I am totally amazed by the disc in the background that rotates infinitely. i have looked at some examples but none worked that way. Can anyone tell me how was that implemented. Thanks. CSS3: @keyframes rotate360 { to { transform: rotate(360deg); } } img { animation: 2s rotate360 infinite linear; } /* TODO: Add -vendor-prefixes for different browsers */ <img src="//placehold.it/200x200/cfc?text=Wooo!" /> This example makes infinite rotation very well: div{ -moz-border-radius: 50px/50px; -webkit

I want to create a ring-shaped process spinner with CSS3 or JavaScript, similar to the loading progress spinner in Android. The spinner should rotate continuously and be filled with a solid colour that fades out along the rim (i.e. a conical gradient) as in this picture: How can I achieve this? This would be trivially easy if only CSS or SVG had conical gradients! Until the conic-gradient() notation matures and gains support, we can approximate the effect by slicing up the gradient and covering the seams somehow. Below you will find two solutions. The first solution uses an embedded SVG image;

I needed to implement infinite bounce effect using pure CSS, so I referred this site and ended up doing this . .animated { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes bounce { 0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);} 50% {-webkit-transform: translateY(-5px);} } @keyframes bounce { 0%, 20%, 40%, 60%, 80%, 100%

I am trying to implement a text loading animation with CSS . what I have is a text with black color, then when the page loads the text will fill start filling with a red color over several seconds. The issue I am facing is that the text loading animation is working fine, but when the text ends and begins with a new line the animation text still continues on the same line. How can I fix this? code: body { background: #3498db; font-family: sans-serif; } h1 { position: relative; color: rgba(0, 0, 0, .3); font-size: 5em; white-space: wrap; } h1:before { content: attr(data-text); position: absolute

I'm wanting to get that animation effect when numbers change quickly, example: http://jsbin.com/kevalutupe/1/ I'm wanting to do this CSS alone (I know how to code it in JS), I don't want to use JS as I feel hammering the DOM isn't the best solution. Is this at all possible with CSS? I'm not fussed about the numbers actually incrementing correctly, I'm just after the effect. The number spinning effect is most definitely possible using CSS3 animations and what's better you can also set the end-point using a small bit of JS and actually get the whole functionality. Method Explanation: A div is