current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0

Tagged Questions

0
votes
3answers
20 views

Trying to learn css animations, can't get it to work

I have worked with CSS for a few years now but have not done much with animations so I am trying to teach myself how to do this and so far not having much success. I set up the keyframes and then call ...
0
votes
0answers
28 views

how to use several animation property in CSS3 without stop ? (just use CSS3)

this is my code and i want this 3 animation repeat infinite. i can put animation property in style="" but those animations are played just once ! and if i set animation property to infinite, div a and ...
7
votes
4answers
152 views

CSS3 animation is not working

I have created an animation for SVG using css3 which is working perfectly in Chrome and Firefox. It is partially working in Safari but not working in Internet Explorer (IE9+ which support css ...
1
vote
1answer
15 views

Transform origin on SVGs in Firefox

I'm new to animating SVGs & I've come across a problem that only seems to happen in Firefox. I've created a animation here - http://codepen.io/iamali/pen/txvpo - of a sky scene. The sun should ...
0
votes
1answer
15 views

Targetting animation/keyframes inside seperate divs

I am trying to hover to pause functionality to my pure css slider. At one point I had it pausing, but then I wanted to add in a div displaying that it is paused. It came to my attention during this ...
0
votes
1answer
29 views

`animation-fill-mode: none;` not working

According to https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode, the animation-fill-mode: none; should not apply style of the first frame to the element before the animation starts. ...
0
votes
0answers
18 views

CSS 3D Transforms - Refuses to animate

Sorry, the classic 'whys my code not working?' I've tried a few things and looked around, But I can't identify the exact problem. Only that things aren't happening as I expected. The rotate keyframe ...
0
votes
2answers
28 views

Is there a way to group browser-specific css3 animations?

I want to make a CSS3 animation where a div gets a box shadow on mouse over, and loses it on mouse out. This is what I have so far: HTML: <div id="page"> <div id="container" ...
5
votes
1answer
132 views

Change the Animation speed on hover

I'm building a planetsystem, where it is possible to hover over the orbit and the animation speed changes. I tried it with the onMouseOver and .hover jquery, but i couldn't figure out why it wasnt ...
1
vote
1answer
49 views

Doing math with LESS variables for animation keyframes

I'm trying to use LESS variables to be able to manipulate the timing on a looped keyframe animation. I'd like to make my animations work off of calculations based on a few variables, but LESS is ...
1
vote
1answer
50 views

Use transform to translate a node until it reaches it's parent's position

Is there a way to improve my current implementation of an automated cell dynamic marquee. The current behavior matches the requirements, but is not as perfect as I would expect. Current behavior As ...
0
votes
1answer
29 views

Animations wont run

I'm trying to run some animations in scss and I'm running into difficulty. In chrome dev tools it shows my element has the correct animation set and I've even copy pasted the keyframes rule into ...
1
vote
2answers
32 views

How to create a stepped animation from a strip?

I'm animating an element background, using a strip - a set of image blocks in a single image - by using only css keyframes. But it doesn't work properly as I don't want the transitions to be linear ...
3
votes
1answer
257 views

Create circular round process bar with gradient

I want to create circular round process bar with CSS3 or JavaScript, but actually i need a border with auto infinite rotate and color linear circle with fade colors (or gradient) like this picture: ...
2
votes
0answers
131 views

How to properly animate each div to slide in pure JavaScript using @keyframes?

I am doing a project on animating the divs to slide smoothly into the user's view page. I notice the div will stick it's right and move with margin-left:-700px, which is what I had set but will not ...
0
votes
1answer
595 views

Chaining CSS animations with infinite loop delay issue

I have chained two animations in a loop. After a lot of tweaking the images scroll in and out without overlapping. The problem is once the animations have finished there is a 3-4 second delay before ...
0
votes
1answer
101 views

CSS3: Smooth transition between animations change on :hover

I have an elements that has infinite css3 animation that is changed to another infinite animation when element is hovered. Everything is ok, but sometimes animation changing is too bouncy, is there a ...
0
votes
3answers
100 views

How to Stop Keyframe Animation

Can you please let me know how I can stop a keyframe animation? In following example the div element is looping in backing to top and moving to down again. Hoe can I stop function after the div riches ...
0
votes
1answer
104 views

How to make fadeout text in css

I made fadein for text in css. Code is .text { -webkit-box-shadow: 0px 0px 5px #333; -moz-box-shadow: 0px 0px 5px #333; -ms-box-shadow: 0px 0px 5px #333; -o-box-shadow: 0px 0px 5px ...
0
votes
0answers
64 views

Set (or pause) a looping anim to the end keyframe

Is it possibe to stop an infinitely looping animation at the end keyframe or to set the animation to the end keyframe? I have an animation that I want to play again and again but be able to pause it ...
1
vote
1answer
102 views

CSS3 keyframe animation on 100% width/height backgrounds

I am trying to animate background of an element that is 100% wide and tall. It is a simple CSS3 animation using steps to go through the sprite image. The animation looks like this: ...
1
vote
1answer
61 views

Unexpected behaviour on CSS3 animation (transform: rotate)

I'm trying to do a simple animation : make some elements spin. But there's something wrong : instead of spinning, the elements are moving as if i applied a "translateX" transform function. I think ...
0
votes
1answer
66 views

Detect if a @keyframes rule exists without iterating all stylesheets?

Is there a way to detect whether a CSS3 animation with a specific name exists, without iterating through all CSS rules? Can be a solution using a JS library, or plain JS. Doesn't matter.
-1
votes
1answer
40 views

CSS Animations and what the timings do

.fromRight.box{ -webkit-animation: fromRightbox 0.6s ease-in 0.8s both; -moz-animation: fromRightbox 0.6s ease-in 0.8s both; -o-animation: fromRightbox 0.6s ease-in 0.8s both; ...
0
votes
1answer
179 views

How to keep a diagonal running background animation without rotating the div?

I have created an animation where a background image moves from left to the right. I want this animation to go diagonal so I've turned the div 45 degrees using: -webkit-transform: rotate(45deg); The ...
0
votes
5answers
76 views

How to create a CSS animation [closed]

So I want this div to go from margin-left:900px to 550px in a smooth animation where it starts fast and goes slower and slower in a smooth kind of way. This should happen on page load. I tried with ...
1
vote
1answer
803 views

CSS3 keyframe animation not working in firefox and IE

My css code works in chrome and safari but not on Firefox, IE and Opera. when i create @keyframes rotate {} , for other browsers, this not worked is that for this 4 line: animation-duration: 4s; ...
2
votes
2answers
1k views

Chain CSS animations with infinite loop

Is it possible to chain two animations and then loop this chain indefinitely? {|--ani1--|--ani1--|--ani1--|--ani2--|--ani2--|} x loop div { width: 50px; height: 50px; border: 3px solid black; ...
0
votes
2answers
502 views

CSS image change on a timer using keyframes

I have pretty much created a image slide show mainly using css, I wonder whether it is possible to add a timer on the following slide show so that images change every 10 seconds. from my ...
0
votes
0answers
274 views

CSS3 keyframe animation not working in firefox 25.0.1 works in Chrome

First time poster here. I am working on a multimedia site and use a lot of animations. I am using CSS to handle the animations which are mostly background images in divs. These animations play and ...
4
votes
4answers
4k views

Sass Mixin for animation keyframe which includes multiple stages and transform property

Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work. STANDARD CSS @-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg);} } @-moz-keyframes ...
0
votes
2answers
555 views

keyframes animation in html css not working

I am playing with some animations, but it won't work at all. It has to be a bounce animation. This is my first time working with it. So I hope I don't make very bad mistake This is mine .html file: ...
0
votes
2answers
1k views

CSS3 Keyframe infinite animation/keyframes inside a media query being glitchy

I started to make a responsive portfolio for myself and ran into some weird glitch like animations. My first question is can you put keyframes inside of a media query? or do I need to make two ...
3
votes
1answer
200 views

How to prevent CSS animation on page load?

I have an animation, which is taking care of the fading in and out transition on button hover state. The problem is that the default animation (-webkit-animation: off-state 1s;) is firing off on page ...
0
votes
1answer
966 views

Is it possible to use CSS3 animations to move an image up and down while infinitely scrolling side to side?

I have a question that I am hoping I can achieve with just CSS3 animations but if the use of jQuery animate is necessary then thats alright as well. :] I have an image of clouds sliding from right to ...
0
votes
1answer
145 views

How to animate one item when the other item is hover

I have div box which contains two items. One is under the other one. So when the lower item is hover I'd make it animated and slide it out of the top item. <div id="main"> <div ...
0
votes
1answer
346 views

CSS keyframes doesn't work with Firefox (23.0.1)

I've got a problem with @keyframes. It works perfectly fine with Chrome and Opera but some elements (big.h class or p) not animating with Firefox (newest version 23.0.1). What is interesting is that ...
0
votes
0answers
865 views

how to fade in a background image specified in CSS?

I've specified a background image using CSS. I have tried using the keyframes and the webkit, moz, and o declarations within my selector to get it to fade in on load. So far this seems to work for me ...
0
votes
1answer
347 views

animating text to rotate around a circle

I used lettering.js (which is a span injector) and css transforms to map a line of text around the edge of a circle. My small goal right now is to animate that text using keyframes. And my problem is ...
0
votes
1answer
477 views

CSS3 animation-delay Property Not Working

I have this code. <!DOCTYPE html> <html> <head> <title>Rollover Test</title> <style> #one { width: 50px; height: 50px; ...
2
votes
1answer
635 views

Get/set current @keyframes percentage/change keyframes

Is it possible to get/set the current animation percentage of a CSS3 @keyframes animation using javascript, jQuery, or some other means? Say for example there is a div with class called .spin that ...
2
votes
1answer
211 views

CSS3 keyframes - changing animation duration causes “jumps”

You can see what's happening here http://goo.gl/bBMx6x (it's a fiddle, it wouldn't allow me to post it without having to c&p code) click on start, wait a couple of seconds and then press stop.. it ...
0
votes
3answers
515 views

Webkit animation stop and reverse

I'm having a little trouble with Webkit animations. I want the animation to play one way when a user rolls over, and the other way when they roll out. Simple no? Apparently not for me. ...
0
votes
1answer
521 views

CSS3 Keyframes animation stopmotion image shaking

I am in desperate need of help. What im trying to do is the same thing mozolla did to the homepage of firefox for their firefox OS. The flaming fox. Heres the demo of it: ...
1
vote
1answer
230 views

CSS Animation based on 2d transform functions in Chrome and Safari, but not in Firefox

I have a simple loading animation that involves rotating a div with a background image. For whatever reason, the animation functions flawlessly in Chrome and Safari, but fails to animate in Firefox. ...
0
votes
2answers
2k views

Sync CSS keyframe color animations

Assuming I have three divs of unknown height of which one has an animated background color using a CSS keyframe animation (see http://css-tricks.com/color-animate-any-shape-2) @-webkit-keyframes ...
0
votes
0answers
153 views

CSS3 keyframes animation not rendering css file in IE10 only

Working on my new portfolio site for web design. First time I decided to jump into CSS3 animation keyframes. So far their really awesome and i can do some much with them, unless its IE10. Really can't ...
0
votes
1answer
2k views

Css Animation not working in Google Chrome

I am trying to use this loader in my web site, scc animation works well in Firefox & IE but doesn't work in Google Chrome. #loader{ width: 820px; height: 670px; border: none; ...
1
vote
5answers
1k views

css keyframe animation won't stop on last frame

I have a 29 frame animation of a tree growing and I want it to stop on the last frame, (when it's fully grown.) I've been trying to look for a solution to have it stop on the last frame, but nothing ...
0
votes
2answers
278 views

css bounce and add class in javascript

what is wrong with my css,the bounce animation just doesn`t happen??? I want an image to bounce on click according to my css animation which is not happening HTML CODE:: <div class="hair"> ...

1 2