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.
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 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 am working on this 3 panel card opening animation.. Here is an example of what I have so far.. example. This is the class that I'm applying for the second animation and transform-origin just doesn't seem to do what I think it should.. But I'm pretty new at this animation stuff.
.two-right {
transform: rotateY(170deg);
transform-origin: 100% 0;
}
As you can see the problem is that I cant get the second animation to open correctly.. On the left side it works just fine but on the right the card isn't opening correctly on the right side of the card.. Right now I'm just poking around and haven't been able to find anything. Any help would be appreciated.
Okay I found the answer to my own question.. The reason is that the flip is based on it's parent.. That's why it is rotating on the wrong axis but after it's scaled and the animation is complete it ends up being positions in the correct location.
Instead of trying to do the animations I put a timeout in the javascript to let it scale and then add the flip animation later. Here is the completed code.
Complete example
.two-right {
/* transform: rotateY(170deg); */
transform-origin: 100% 0;
}
.two-flip {
transform: rotateY(160deg);
}
I first add the .two-right class and then the .two-flip half a second later.
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.
Fiddle
Basically, instead of just the basic rotateY(180deg) method, I'm trying to combine it with a translateX transform so that the card looks like it's actually being picked up from the right side (left when flipping back) and then being laid back down on the "table" in its new orientation.
As you can see in the Fiddle, it has the right general motion, but for some reason the two faces are not in sync. I'm not sure what I'm doing wrong - I guess I'm just not spacial-geometrically incined XD
Any help sorting this animation out would be much appreciated!
I think that this is what you want:
updated fiddle
The trick is that the background needs another transform origin:
#tcb {
background:#030;
transform:translateX(-100%) rotateY(180deg);
-webkit-transform:translateX(-100%) rotateY(180deg);
z-index:0;
transform-origin:100% 50%;
-webkit-transform-origin:100% 50%;
}
The reason is that the angle of rotation is reversed, so that you need to flip it around the other border. (So, the origin at 100%). And now that you have changed, that, you need to readjust the offset (the translateX value)
I needed also to move the transform-origin for the foreground from the div (where it was set both for foreground and background) to the foreground div.