I have a simple CSS3 keyframe animation that I would like to reverse while it runs.
See the code here: http://jsfiddle.net/breizo/EUVAv/
#-webkit-keyframes transform-keyframes {
0% {-webkit-transform:translateX(0px) translateY(0px) rotate(270deg);}
25% {-webkit-transform:translateX(200px) translateY(0px) rotate(270deg);}
25.01% {-webkit-transform:translateX(200px) translateY(0px) rotate(0deg);}
50% {-webkit-transform:translateX(200px) translateY(200px) rotate(0deg);}
50.01% {-webkit-transform:translateX(200px) translateY(200px) rotate(90deg);}
75% {-webkit-transform:translateX(0px) translateY(200px) rotate(90deg);}
75.01% {-webkit-transform:translateX(0px) translateY(200px) rotate(180deg);}
100% {-webkit-transform:translateX(0px) translateY(0px) rotate(180deg);}
}
Anybody has a trick to prevent the animation from jumping to another keyframe than the current one?
It looks like it is jumping to the keyframe symmetrical to 1/2 of the duration.
Any input is greatly appreciated.
I had the same flavor of jumpiness using CSS to animate a 3D carousel product catalog In two directions based on :hover.
Having fiddled with obvious ideas like animation-fill-mode:forwards and such with not the least good fortunes what finally solved it was to mix in two bits of transition syntax with a tiny duration and the transform itself as the property. In the course of transition chasing to catch transform's state ,it's updates To the element being transformed remained intact , and the effect seems to fit the specs , so it should be a valid solution
transition-duration: 0.2s;transition-property:transform;
pardon any typos ,as I"m using a pad.
After much hair pulling (not much left...) I ended up using the excellent greensock library: http://www.greensock.com/gsap-js/
It gives much more control to the whole animation.
Related
I made an animation to look like fire flies but it keeps flickering when starting a new loop
I used -webkit-transform-style: preserve-3d; and -webkit-backface-visibility: hidden; but they don't work
https://codepen.io/Triciah101/pen/YmKLzb
this is an example of the code on code pen.
I want the animation to be smooth without the weird flickering it does.
Because you start at translate position of 0% and finished in another distance at 100%.
Try to match 0% and 100%, so there will be a "combination" in the animation.
Also, you are going from 0% to 2% and changing a lot of distance. This is too fast, and it's causing the unwanted effect.
I can't find any answers on google, so I'm trying here:
Is there a way for animation-timing-function property to work for an animation as a whole? Because now it is acting on midpoints, rather than on the whole animation. I mean, I have this animation:
Codepen link
and the animation-timing-function property is set to ease-in. But rather than the whole animation easing in, the 0% - 50% part eases separately from 50% - 100% part, and because of it, the animation isn't smooth. Is there a way to do this?
I have apparent gaps in my CSS experience. While I can easily apply and extend what I do know, I'm missing the terms to even search for what I don't know.
So, I've taken parts of Animation.css and applied them, but I don't know how to constrain the bounds of animations like bounceInUp. When the animation happens, the transition seems to have no bounds. I'd like to constrain the bounds of the animation so that it starts and finishes inside its container.
What am I trying to do here? Constrain the bounds, clip the animation, mask it? I've been digging and haven't found what I'm looking for yet.
The best solution I've found is to set the starting position in the CSS's translate3d(). Not sure if that is the "right" way, but it has the right effect for me. I'm not sure what I was expecting to find; however, I don't particularly like this approach because I'll have to tweak the animation CSS based on the size of the container element. I'd prefer to just code the CSS solution once and freely resize containers.
#keyframes bounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
/* Set the y length(?) / offset position */
transform: translate3d(0, 300px, 0);
}
}
I have a loading indicator (a bar that continuously animates its width from 0% to 100%) using css3 keyframes. I trigger this behavior by adding a .loading class to by loading bar. Now once I am done loading I would like to animate out of the keyframes. Say, for example at the time that I finish loading the width is animated to 50% I would not have it jump to 100%, but ease it to 100% where it should stay.
I have tried adding a transition and animation to my loading bar class, but neither seems to be working. How do I go about this?
Here's the jsFiddle.
You can use the animationiteration (MDN) event to detect when the animation reaches the end of a loop and then remove the class.
$('#bar').on('webkitAnimationIteration', function(e){
$('#bar').removeClass('loading').off('webkitAnimationIteration');
});
I've updated the fiddle here: http://jsfiddle.net/jedidiah/kYnhF/6/
-
For simplicity I've only added the webkit prefix to the the fiddle but there is a useful article about css animation events in javascript here http://www.sitepoint.com/css3-animation-javascript-event-handlers/ where they share a little function to simplify using the prefixes you could use to support other browsers.
I upvoted #Jedidiah answer, I think that is what you need.
BTW, If you are interested in an alternative, simple CSS3 solution, then add to your #bar:
transition: all 1s;
-webkit-transition: all 1s
Running Demo
Potential drawbacks (depending on your needs):
It won't respect the previous speed of the progressbar (no matter if you are at 10% or 90%, the remaining part will take 1 second to complete... but this is how often the progressbars of the installers work, so it may not be a problem);
It won't run all the animation: if you are in the first half, it will fill to the left, instead of completing all the round.
I have a div which is already rotated, however all content within it is transformed in the same fashion.
I have plugged a fiddle below to better illustrate what I am trying to achieve.
What would be the proper way to transform the image of the 'moon' so that it maintains it's original shape as it travels the path?
Simple: Make the moon rotate in the opposite direction!
http://jsfiddle.net/hsntY/3/
#moon { width:150px; animation:RotateRev 15s linear infinite;}
#keyframes RotateRev
{from {transform:rotate(360deg);}
to {transform:rotate(0deg);}}
(also, I can understand if it was just for example or something, but you should use the standard spec AND have prefix fallbacks)
The proper way to transform the image is applying the oposite transforms that you have applied to all the elements.
In your case, that includes the rotateX and rotateY in the path, and the rotate in the animation.
for this to work ok, you also need to specify -webkit-transform-style: preserve-3d; so that the transformations can really undo the previous transforms.
There is a problem, though, and I think this is a Chrome bug: when you apply a keyframes animation, preserve-3d stops working.
So, sorry to say, I am unable to make it work; and I think that it is not posible if this bug isn't corrected. May be in another browser ?
you can check the static correct fiddle correct fiddle without animation
You can see there also the inverse keyframes animation, that you would need to make it work.
I would suggest you to create the elipse scaling the circle in the plane, instead of rotating it in 3D, I believe you can make that work this way
The CSS end like that:
#Path{margin:5% 15% auto; position:relative;
height:500px;width:500px;
background-color:rgba(0,200,200, .1);
border:1px solid black;
border-radius:300px;
-webkit-transform:perspective(0px) rotateX(50deg) rotateY(25deg);
-webkit-transform-style: preserve-3d;}
#moonContain {width:500px;height:500px;position:absolute; margin-left:-0.5%;
-webkit-transform-style: preserve-3d;
}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(0px) rotateX(-50deg) rotateY(-25deg); }
#-webkit-keyframes Rotate
{from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}}
#-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg);}
to {-webkit-transform:rotate(0deg);}}
Correction
I wrongly interpret the problem that arises when you set the animation in the moon itself; and I thought it was a bug in Chrome. What it really was happening was that the animation was animating the transform property, and that undoes the transform property specified in the moon itself.
Correct answer:
set both transforms in the animation, even though the later is constant:
#-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg) rotateX(-50deg) rotateY(-25deg);}
to {-webkit-transform:rotate(0deg) rotateX(-50deg) rotateY(-25deg);}}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-animation:counterRotate 15s linear infinite;}
Correct demo