css-animations

I'm working on a css animation that uses 'cogs and chains', but am unable to create a 'smooth' border rotation sequence. You can see in this fiddle How (currently) I'm using a pseudo element to generate a 'rotation' effect. This is done by 'switching' between a dashed white and dashed gold colored border, making it seem like the 'border is rotating'. What I have #one{ -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */ -o-animation: rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */

I'm attempting to use CSS3 (gradients and animations) to make an animation similar to the iphone slide to unlock gradient. However, for some reason, the background-position only works when I use static pixel numbers and not when I use percentages. Ideally, I'd be able to apply this class to any element, and have the animation work, without needing to code for specific widths. Can somebody point me in the right direction? JSFiddle: https://jsfiddle.net/ekLamtbL/ .slideToUnlock { background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%); -webkit-background-clip:

I know this question has probably been asked million times here in SO, but Ive tried most of the solution, I just dont know why it dont work for me. So I have a dropdown with display initially targeted to none . When I click on it, it shows nice transition. (So far so good). But when I click on it again to go hide the dropdown, it hides immediately, but I dont want that. I want to hide with similar transition that was assigned to show. Here is my code for CSS: .dropdown-menu { padding: 0 0; display: none; -webkit-animation: slide-down .3s ease-out; -moz-animation: slide-down .3s ease-out; }

CSS3 animations are not working in IE9. Here is the jfiddle link . Is it possible to make them working on IE or i am making some silly mistake? Here is the code which is not working: @-ms-keyframes rotating { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); } } #rotateMe{ -ms-animation: rotating 5s linear infinite; } As IE doent support this functionality i have created the fallback using jquery rotate plugin here is my fallback function for IE: $(function() { if (!$.support.transition){ var angle = 0; var angle2 = 0; setInterval(function(){ angle+=0.3; angle2-=0.3; $(

I'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this. MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/ CSS .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0

Hi folks! I've been reading the awesome article "Using SVG" from Chris Coyer ( http://css-tricks.com/using-svg/ ), and decided to use some things to make an animated logo. But I'ts been a little fight. I'll explain. I'm using an .svg file for the logo. I'm pulling the file in an html file using the <object> tag. Inside the SVG file, I'm using css3 animations to do some tricks with the objects inside the svg. Using the svg file with css3 animations and the <object> tag is working good. But the problem starts when I try to put this inside a <a> tag. I'm using a trick pointed at the Johan

I have text that I want to animate. Not on hover, for example but continually changing slowly from white to red and then back to white again. Here is my CSS code so far: #countText{ color: #eeeeee; font-family: "League Gothic", Impact, sans-serif; line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0px 0px 6px ; font-size: 210px; } Sourabh Use keyframes and animation property HTML <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p> CSS p{ -webkit-animation: color-change 1s infinite; -moz-animation: color-change 1s

I'm wondering if it's ok to use percentage values like this: @keyframes myAnimation { 0% { height: 100px; } 33.3% { height: 120px; } 66.6% { height: 140px; } 100% { height: 200px; } } It seems to work, but it I am not sure if the browsers might just "round" this? And what about values like 33.3457%? Thanks a lot! When it comes to CSS it takes notice of percentages down to 2 decimal places and then stops. So you would be able to get 33.34% but not 33.3457% for use in your keyframes I hope this helps. Yes, you can use fractional part to define more precise keyframes percentages. But such