CSS3 animations make it possible to animate transitions from one CSS style configuration to another.

learn more… | top users | synonyms

0
votes
3answers
15 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
1answer
9 views

CSS3 Transition of HTML5 progress bar element

I am using a progress bar as described here: http://css-tricks.com/html5-progress-element/ Using the element and styling it with the pseudo classes -webkit-progress-bar & -webkit-progress-value. ...
0
votes
1answer
19 views

Angular v1.2 animation for images

I have been going through tutorials and past questions, trying to figure out where my code is going wrong for applying an animation to the transition of the images I am trying to display. ng-show ...
-1
votes
0answers
35 views

Issue On Using CSS Animation with Jquery

Can you please take a look at this Demo and help me apply an animation to the toggle. (any animation will do for now). I already added these rules to the elements but it is not working. ...
1
vote
1answer
16 views

Issue on Adding Animation to jQuery toggleClass()

Can you please take a look at This Demo and let me know how I can add Animation / Speed or Duration to the following code $("#ecolomodel").on("click",function(){ ...
0
votes
1answer
12 views

SVG icons blur/unblur in chrome during any CSS animations

See the picture below. The image on the left is during "resting state", the image on the right is during a CSS3 animation on a different element on the page (the animation is also on an SVG icon ...
0
votes
2answers
32 views

Text isn't selectable on website, possibly masked by css [on hold]

Currently I'm developing a simple website on which a experiment a lot with modern CSS techniques like animations and transition. But after implementing some carefully planned animations, suddenly my ...
0
votes
0answers
12 views

Image pixelation with css animation

I used a jpg image in a simple css-animation to go to the right, back to the left and right again, animation-direction: alternate; My issue is that when the image is moving it's getting somewhat ...
0
votes
0answers
27 views

Why won't this CSS3 animation work in IE or Firefox?

I am using jQuery to trigger this class on Flash banners and it works perfectly in Safari and Chrome but not in Firefox or IE. The jQuery works it's just the CSS3 fade which doesn't: .opacityChange { ...
0
votes
0answers
6 views

CSS3 transform transition buggy in Firefox good in Chrome

I have a basic bootstrap grid in which I hold flippable cards. When clicking on a card the grid moves back while the card flips and resizes to full screen. The animation works great in Chrome, but in ...
0
votes
0answers
16 views

Reduce image decoding time for Cordova iOS app

I'm currently creating an iOS app with Cordova which uses CSS3 animation transitions to fake slide in/out and pop in/out page navigation. The issue I am currently experiencing is that after the ...
0
votes
4answers
39 views

How to transparently mask an object so only the background will be visible?

Description I created an animation with CSS3 transition and transformation. This is a rotating block that looks like its bottom parts are trimmed down while moving. I want the trimmed part to show ...
0
votes
1answer
37 views

CSS3 Hover Animation not responding

I am trying to get figcaption caption to appear fade in/animate on hover on the bottom. But i cannot get the figcaption div tag seems to disappear off the screen. I want it so that when you hover ...
0
votes
0answers
6 views

CSS animation reverse not working on element that received the same animation in normal direction before

I have an element 'box' that needs to be in the DOM but not appear until another class is added to it. When that happens, 'box' appears and animates. After that completes, some other things happen ...
0
votes
2answers
42 views

How to trigger/refer a custom JavaScript object?

I've created a javascript animation object inside a div with #box id, but my problem is I can't refer to the animation object outside the function. http://codepen.io/vincentccw/pen/bfojB?editors=101 ...
0
votes
1answer
20 views

Using hover and click for same effect using CSS animation

I currently have a hover effect on a div using CSS (code below) how do I make the effect occur on hover and on click. I believe its using .hover as well as using .active but how would I use them ...
0
votes
1answer
25 views

3d Cube to show 3 sides at a time

I've been looking at different tutorials to make a rotating 3d cube in CSS3. This tutorial from the-art-of-the-web is the one that I've decided to leverage. My end goal is to have it look similar to ...
0
votes
0answers
26 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 ...
0
votes
0answers
52 views

CSS3 background-position in percentage not working at all

So I'm coding a parallax effect in CSS3 with 3 layers for a page header. My style sheet is the following: #graphic-layer { /* overall properties for graphic layers */ position: absolute; ...
0
votes
1answer
12 views

Rotation breaks in CSS animation when height/width is defined in keyframes

I've got an element which i'm trying to animate in. I want to do the animation in two steps, first scale and rotate a square in, and then widen the square. I start off by transform: scale(.1) ...
1
vote
1answer
20 views

Animation events firing on psuedo-elements?

I'm observing some inconsistent behaviour regarding animation events. Demo: http://jsfiddle.net/2J37a/ In Chrome, I'm seeing a webkitAnimationIteration event for each iteration of fly in addition to ...
0
votes
1answer
23 views

Flip Animation - Internet Explorer

I have been using a script I found online for a flip animation in an application I am building. The flip works on all browsers except for IE. Can anyone send me a fix that will help sort this out ...
3
votes
1answer
63 views
+50

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 ...
0
votes
1answer
25 views

Bugs with chaining CSS3 animations

I'm trying to chain CSS3 animations together, but they behave very weird sometimes. For example, in this pen, why won't the last animation start? I got it working before, but it doesn't anymore, and I ...
0
votes
1answer
25 views

css animation working in chrome but not firefox

The following CSS works in Chrome 35 but does not work in Firefox 30: @-webkit-keyframes redpulse { from { background-color: #FFAAA3; } to { background-color: red; } } @-moz-keyframes ...
0
votes
0answers
18 views

Jittery text on 3D Rotate Animation with a Scaled parent on Firefox - Any Fix / Hacks?

I have a website that uses this technique (3D Transform Animated Text Element with a Scale Animated parent). What happens is the text and the whole element kind of jitters / wobbles on rotate ...
1
vote
2answers
40 views

Why is CSS Hover behaviour flaky?

I want to create a button (using only css and html) that reveals another button beneath it on hover by rotating on it's lowermost axis. I've been mostly successful: ...
0
votes
1answer
50 views

Can't seem to get ngAnimate to work on an ng-repeat

I have the following snippet of HTML: <div ng-app ng-controller="mainCtrl"> <div ng-repeat="item in items" ng-mouseenter="item.showRemove = true" ng-mouseleave="item.showRemove = false" ...
2
votes
1answer
46 views

How to use the will-change property and CSS animations

When using the will-change property to optimize a CSS keyframe based animation, should you set its property to animation or to the properties changed inside of the keyframe? So, assuming this CSS: ...
1
vote
1answer
14 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 ...
-3
votes
1answer
26 views

Google I'm feeling lucky button animation javascript

Google I'm feeling lucky button, changes when you hover over it. how is it done using java scripts, I think there is a DIV change there am I right? Or is it CSS animation? I haven't found a similar ...
0
votes
0answers
19 views

CSS animation (transform, translate) getting cut off by containers overflow

I have a container that I need to set the overflow to either hidden or scroll. But I have a css animation on it's child (translate -500px -> 0px) which is getting cut off by the overflow setting. Is ...
0
votes
2answers
54 views

Trying to create an infinite scrolling banner in Chrome

I've spent all day trying to create an infinite scrolling banner, using CSS3 animations. These are my requirements: The banner width must be across the entire page; No matter how large or small the ...
0
votes
1answer
26 views

CSS 3 float text top left in keyframe animation

I've tried many different ways to add text to this keyframe animation, but the problem is that it messes up one of the animations when I include the div containing the text. Ideally, I want the text ...
1
vote
1answer
28 views

CSS Translate already translated element

I'm trying to apply the "bounce" effect from animate.css to an element that already has the following property in it's style element (added by a third-party JS library): style="... transform: ...
0
votes
1answer
23 views

css rotate a transformed object

html <div class="camera"> <div class="dreid"> <div class="planet1"></div> <div class="planet2"></div> </div> </div> css .camera { ...
0
votes
0answers
23 views

Foundation 5 Tabs Animation or Transitions

Foundation 5 Tabs currently don't have any transition effects. There are several references to FadeIn transitions using pure CSS3 (here) but I'm looking to have an off screen slide effect. The ...
0
votes
1answer
41 views

How do you do slide in from the left and right web page transitions using CSS?

I created page transitions for sliding in from the right and from the left using CSS similar to this (Below). I got the idea from MDN CSS Animations. /* -webkit-, -moz-, -o- vendor prefixes omitted ...
0
votes
0answers
25 views

Prevent CSS Animation Flickering

CSS webkit animations cause flickering that I am unable to eliminate in both Safari and Chrome. I have seen numerous fixes online, none of which work for me. The one that comes closest is ...
0
votes
1answer
15 views

One part of my CSS animation is resetting. I don't want it to

I am trying to animate some ice cubes dropping into a cup. The animation should fall, spin while falling, hit the bottom of the div, then slightly bounce back up then go back to the bottom of the div. ...
0
votes
0answers
20 views

css transition dependent on password field presence

It seems to be the case that if I have a password input inside a form element, and if I load an external stylesheet that defines a simple css transition, then that transition applies as the page ...
0
votes
0answers
41 views

Jquery Animation Slide in Effect [duplicate]

My thread was not answered so i am asking for help again i just need little bit of guidance i am new in Jquery and working for a company. I have done most of the part but needs a little help in my ...
0
votes
1answer
19 views

How to do animations on change of media queries?

I'm using foundation 5 for a project, and I simply can't find any article on how tyo do nice animation on the change of media queries (e.g. if you resize the window, and the layout change, the site ...
0
votes
0answers
19 views

css3 animation start and pause shaking

I use css3 animation to rotate a div element infinitely, and use animation-play-state to pause or play the animation. but when the animation pause or play, the animation div will shake somewhat, how ...
0
votes
1answer
14 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
31 views

disable css animation on mobile devices

I am working on a horizontal scrolling site and to add to it it has a couple of CSS animations that totally crash all the browsers on the ipad i am testing on, so I am wondering if there is a way for ...
0
votes
0answers
36 views

Webview css3 animation not working properly

In my app I use CSS3 animation in webview. All animations work properly but when I change top and scale animation same time page flickers annoyingly. I open the hmtl in Chrome browser , it worked also ...
0
votes
1answer
23 views

Webkit keyframes not working on safari or chrome

I have been trying to find a solution on how i can get my safari browser to apply the animation using CSS3. I have already declared webkit on my css to make work on chrome or safari. In mozilla it ...
1
vote
2answers
22 views

Add delay using .each when adding class

I'm trying to create a simple animation in which each letter would scale one by one. Would it be possible to have a 1 second delay when adding a class in each div? Here is what i have done at the ...
0
votes
1answer
24 views

Hide scroll bars when png rotates

I am trying to rotate two png rings on a page. Everything is working except in Firefox scroll bars are appearing and moving up and down. I assume this is because of the square png rotating and bumping ...