css-animations

I am trying to combine 2 CSS3 Animations that fade in and out. Can anyone help me with this? This is what I have so far - jsFiddle Ok got your question updated my answer accordingly, the best and the least you can do it is like this Demo Actual Markup + Styles Required (Don't use it unless and until CSS3 animations are fully supported by all browsers) HTML <div class="out"><span>example</span></div> CSS div { animation:demo 7s; -moz-animation:demo 7s; /* Firefox */ -webkit-animation:demo 7s; /* Safari and Chrome */ -o-animation:demo 7s; /* Opera */ animation:demo 7s infinite; } @keyframes demo

I have created the beginning of a CSS3 animation as shown below. I have tried to use @for and @each within SCSS to create a loop which will increment the %'s and also the number of each background image. My knowledge of advanced SCSS like this is poor, so everything I have tried has been nonsense and trial and error based on reading the SCSS docs - and really not worth posting here. Is it possible to use SCSS in this way to save having to type each keyframe? .perimeterAnim { background-image: url('../img/perimeters/PerimeterFountains00.png'); -webkit-animation: perimeter 5s infinite; -moz

I've set up a simple JSFiddle to illustrate the problem: where's the paused state? Can anyone tell me why Safari shows the animated element in a paused state as expected, but in Chrome the animation is running? I'm using Chrome 33.0.1750.146, and wonder if this is a bug with the latest build. Or am I completely missing something.... Here's the CSS of the paused element. #blue-box { width: 100px; height: 100px; background: blue; -webkit-animation-name: blueBox; -webkit-animation-play-state: paused; -webkit-animation-duration: 2000ms; -webkit-animation-timing-function: ease; -webkit-animation

In the animation below the transform is animated correctly, but the left and top properties are not. Why is this? .element-animation { background-color: yellow; width: 30px; height: 30px; animation: animationFrames ease 2s; animation-iteration-count: infinite; } @keyframes animationFrames { 0% { left: 0px; top: 0px; opacity: 1; transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg); } 25% { left: 0px; top: -90px; } 75% { left: 200px; top: -90px; } 100% { left: 200px; top: 0px; opacity: 1; transform: rotate(0deg) scaleX(2) scaleY(2) skewX(45deg) skewY(45deg); } } <div class=

I'm working on making a simple loading spinner element with SVG. It works excellently in Chrome, but not in other browsers. In IE, the animation doesn't work at all. More troubling, in FF, the animation works but the rotation is not centered at the right location. What can I do to make it rotate correctly in FF? (Edit: It actually works correctly in FF 42alpha.) Is there anything I can do to get it to work in IE? (Targeting the current version of these browsers) The snippet below contains the relevant CSS and HTML: svg.spinner { display: block; width: 50px; } svg.spinner path { fill-opacity: 0

I have the following structure, and my problem is that when the animaition ends that is replacing down it just restart, and I was wondering if there's anyway it just stops nad waits in the finle while its hovered, thanks , here is the code: http://jsfiddle.net/bd4c5cc7/ <div class="nav"> <ul class="list"> <li> <a href="#">Inicio</a> </li> <li> <a href="#">Quienes somos</a> </li> <li> <a href="#">Servicios</a> </li> <li> <a href="#">Flota</a> </li> <li> <a href="#">Donde estamos</a> </li> <li> <a href="#">Contacto</a> </li> <li> <a href="#">Galeria</a> </li> </ul> </div> And this is my CSS:

The snippet bellow shows the thing I want to do. But there are some problems: How to make this animation without using SMIL? SMIL is deprecated and has a bad browser support. How to make black path going through right end og the blue one? Red, blue and green paths have the same length. Animation should be repeated down - up - down - up and so on. The first question is the main one. I have some ideas about the others but I can't apply them before the first question is solved. I wrote the other questions just to clarify what am I doing. http://jsfiddle.net/2yLxpjaw/2/ svg { outline: 1px solid

I have an issue but can't find where I made a mistake... I made an little animation using transform in CSS as you can see on the code. But sometimes when I hover the mouse the animation becomes crazy. I feel like it occurs often when I hover from bottom left to right. Wonder is you can see it. Can you help me fix it please ? *{ box-sizing: border-box; } body{ margin: 0; padding: 0; background: #ccc; } .container{ width: 400px; margin: 0 auto; margin-top: 200px; position: relative; } .carre{ float: right; width: 200px; height: 300px; position: relative; background-color: #63aace; border: 3px