css-animations

When giving e.g. a <div> a box-shadow as well as rotating it will cause a rotation of the box-shadow direction - which is problematic when the box-shadow should create an illusion of lighting. Example: https://jsfiddle.net/5h7z4swk/ div { width: 50px; height: 50px; margin: 20px; box-shadow: 10px 10px 10px #000; display: inline-block; } #box1 { background-color: #b00; } #box2 { background-color: #0b0; transform: rotate(30deg); } #box3 { background-color: #00b; transform: rotate(60deg); } #box4 { background-color: #b0b; transform: rotate(90deg); } @keyframes spin { from { transform: rotate(0deg)

I'm trying to get a CSS animation property to stay after completing, is this possible? This is what I'm trying to achieve... The element should be hidden when the user lands on the page, after 3 seconds (or whatever), it should fade in and once the animation has completed it should stay there. Here is a fiddle attempt... http://jsfiddle.net/GZx6F/ Here is the code for preservation... <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style> I know how to do this with jQuery.. it would be like this... <h2>test</h2>

How can I have two CSS animations playing at different speeds ? The image should be rotating and growing at the same time. The rotation will cycle every 2 seconds. The growth will cycle every 4 seconds. Example Code: .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite; } @-webkit-keyframes spin { 100% { transform: rotate(180deg); } } @-webkit-keyframes scale { 100% { transform: scaleX(2) scaleY(2); } } http://jsfiddle.net/Ugc5g/3388/ - only one animation (the

I'm using css animations on my page and Safari seems to change unrelated font weights elsewhere on the page when animations are running. Any idea why this happens? All other browsers work fine, include webkit ones like Chrome. I've detailed the bug in a video here - http://www.screenr.com/gZN8 The site is also here - http://airport-r7.appspot.com/ but it might keep changing rapidly. I'm using compass (@transition-property, @transition-duration) on the arrow icons. No transitions applied on the heading that's flashing. On a Mac - so it might be the hardware acceleration, but I'm still trying to

So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which. For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I'll have a nice animation going. However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu: This effect can be achieved through transitions like so: .sf-page { -webkit-transition: -webkit-transform

I know this is asked multiple times here, but I am asking for a different approach for these kind of animations. Problem: The 2nd box has multiple animations, trying to create the same effect as 1st one. It seems like the transform property is getting overwritten (as it should)* . I am trying to extend the 1st animation (of 2nd box) with the properties of 2nd animation. Tried to use animation-fill-mode: forwards but with no success. Maybe I am missing something basic. Is it possible with vanilla CSS? * Reference The ‘animation-name’ property defines a list of animations that apply. If multiple

I have the following snippet of Sass that works like a charm, but I wonder if I need to prefix my transform properties, and, if so, how? (if not, why not?) @mixin expand-o-band() { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } } @-webkit-keyframes expand-o-band { @include expand-o-band(); } @-moz-keyframes expand-o-band { @include expand-o-band(); } @-o-keyframes expand-o-band { @include expand-o-band(); } @keyframes expand-o-band { @include expand-o-band(); } .circle-thing { -webkit-animation: expand-o-band 1.5s infinite; /* Safari 4+ */ -moz-animation:

The title pretty much says it all but here is an example. Let's say I have a CSS 'loading spinner' as below: .spinner { height: 50px; width: 50px; position: relative; animation: rotate .6s infinite linear; border-left: 6px solid #222; border-right: 6px solid #222; border-bottom: 6px solid #222;; border-top: 6px solid #ccc; border-radius: 100%; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } I want to add a pseudo element to this - for example with content: 'loading...' before or after .spinner . Is it possible to ensure the pseudo element does not