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.
Related
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 wanted to draw a curved animation and after a lot of doing monkey coding I get the desired result. But I'm stuck how does this work!
Look this picture: demo
Now look this picture too: demo
I got the desired animation that is curved animation after just removing left: 50px; from 50% keyframes
But, I wanted to know how this is becoming curved as it's initial position is left: 50px;, not? Even if I don't place the left value it should go like previous but amazingly it's curving. So anyone have some idea about this?
From MDN - #keyframes
When properties are left out of some keyframes
Any properties that you don't specify in every keyframe are interpolated
And it seems the values are interpolated midway from the current to the next given value, using the animation-timing-function, which is ease in your case.
When you change the timing function to linear for example, you get a straight line
#ball {
animation-timing-function: linear;
}
See modified JSFiddle
Finally I got it now that how this works.
When one property is left(i.e. removed) then it's value is increased accordingly.
Example:
0%{bottom: 0%; left:0%;}
50%{bottom: 0%;}/*the left property is left(removed)*/
100%{bottom: 100%; left: 100%;}
In the above code the value of left in 50% is initial(animation from 0%) = 0% and end point (animation to 100%) = 100%.
So here the bottom value will be the same defined in 50% keyframe but the value of left will increase accordingly that is
from 0% to 1%, 2%, 3%, 4%, and so on. Likewise, if you left(remove) the bottom property and keep(add) left property then it
will increase the value of bottom accordingly.
See this demo to make your concept clearer.
Hence the demonstration in the question is being viewed curved.
By the way of this concept I've made a demo to make a circular animation also.
P/s: the animation-timing-function rather than ease works differently.
Try this yourslef::demo by changing the value from ease to anything you want such as ease-in-out.
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
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.