css-animations

I'm building an iOS app with PhoneGap. I'm using translate3d CSS animations to create the 'flip' effect. This works great on simpler elements...a DIV with front/back divs and maybe an extra span or two. But when I attempt to flip a larger element...namely the entire screen, I get redraw glitches. What happens as soon as I swap the css class to start the transition, parts of the 'bottom' div pop-through the 'top' div, then the flip happens, then they pop-out again. And it's not the entire element that shows through...it's half of the element split along the axis that I'm doing the translate 3d

Here I have an example of CSS keyframe animation (You can see the whole thing on this Demo ) The code will every 1.4 seconds scale the img to 0.75 and go back to it's original (1) scale. That works fine. Then I add a simple jQuery code to simulate the error: setTimeout(function () { $("img").css('visibility', 'hidden'); activate(); }, 3000); function activate() { setTimeout(function () { $("img").css('visibility', 'visible'); }, 3000); } @-webkit-keyframes imagebulger { to { -webkit-transform: scale(.75); transform: scale(.75); } } @keyframes imagebulger { to { -webkit-transform: scale(.75);

I have an element that needs to animate left and right to the amount of 50% of its full width. I've accomplished this with the following (simplified) markup: <div class="wrapper"> <div class="inner">Inner</div> </div> And style: .wrapper { position: relative; width: 300px; height: 200px; } .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: MOVE_AROUND 5s infinite; } With keyframe animation: @keyframes MOVE_AROUND { 0%, 10% { transform: translate3d(0, 0, 0); } 20%, 40% { transform: translate3d(-50%, 0, 0); } 60%, 80% { transform: translate3d(50%, 0, 0); } 90%, 100% {

The MDN animation documentation refers to animation type being discrete . What does this mean? Discrete animations proceed from one keyframe to the next without any interpolation. Think of it the way you normally would think of an animation - one image to the next. Interpolation is inbetweening - filling in space between the main images (in the case of computer graphics these are found from formulas). In traditional hand-drawn animation, the main artist would produce the keyframes, and an assistant would draw the inbetweens. So discrete animation is like hand-drawn animation done without the

I started an Ionic tabs project. With this project comes the default animation between views (which is from left to right when entering, and from right to left when going back). I would like to retain control on this - by specifying two type of view animations: from bottom to up no animation So far I tried to disable the animation as follows, as was suggested on this Ionic Forum Topic but it did not change anything: <ion-nav-view animation="no-animation"></ion-nav-view> What is going on? angular.module('YOUR_APP_NAME_HERE').config(function($ionicConfigProvider) { $ionicConfigProvider.views

I'm having a hard time googling this issue because most of the things I can find are about animations that are supposed to be fast but are acting slow. My question is regarding an animation that I want to have a long duration but still be smooth. I've created this jsfiddle to demonstrate the issue: http://jsfiddle.net/93Bqx/ I'm trying to make an element slowly move to another position over time. But the animation is very choppy. Basically, it boils down to something like this: $elem.animate({ left: x, top: y }, someLargeNumber); I'm wondering if the problem is that the animation is so slow

I'm having trouble creating a flyout menu with a specific effect. The flyout goes from display:none to block and then I use jquery to animate opacity from 0 to 1 (and vice versa). This is necessary because otherwise the transition does not happen when the element has just had it's display property changed. I did not think that this would propagate to children. But inside of my flyout I have 4 columns of links that have an opacity transition, each with it's own delay so they come in one at a time. However, this does not work as the flyout appears. They are instantly at opacity: 1 and even with