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.
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 am trying to animate a list of html elements with following CSS property:
animation: slide-right 10s linear infinite 0s;
Animation is perfect for me but, when list finish I would like to have a loop behaviour instead of a jerky transition that restart the animation because of infinite property of animation.
I tried to workaround it appending items via jQuery but it doesn't work. It's possible to do a loop animation with css3?
I got inspiration from this codepen: https://codepen.io/goomy/pen/vXKGGz
Thanks in advance
UPDATE: My code here
By "loop" I am going to assume you mean you want the element to re-appear from the bottom of the screen once it has vanished off the top of the screen.
One way to achieve this could be to set overflow-y: hidden on your body element, and then define the animation keyframes in terms of viewport height units, vh. If you translate an element to appear at y = 110vh then (assuming the document doesn't overflow) you know that it must appear off-screen since the very bottom of the body element is at 100vh. Similarly, you can transition to something like -10vh at the top, assuming the element is less than 10vh tall.
I modified your CodePen to illustrate this idea:
https://codepen.io/anon/pen/pwBxPL
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 am trying to apply a Minecraft-like style to a div element. The end result should look something like the "if not ok then return end" message:
Quick sidenote: For those of you who haven't played the game, a random line from a specific file is read and it's contents are displayed as the message of the day. It throbs in and out and grabs your attention.
The text shadow, font, and throbbing animation has already been done. However, when I try to apply the second animation, it overrides the throbbing animation (meaning it does not throb, but is rotated)
My CSS is as follows:
#random-message {
/* font/text stuff */
animation:minecraft, minecraft-rotate 0.5s infinite;
-webkit-animation:minecraft 0.5s infinite; /* Safari and Chrome */
}
The animation minecraft applies a transform: scale effect, and minecraft-rotate applies a transform: rotate effect.
What would be the best way to implement a rotation effect without overriding my throbbing effect?
You don't want to have a rotation animation...you want to rotate the div. Simply add transform: rotate(340deg); line to the css block.
Any given element can have only one transform at any given time. Any attempt to set at the same time 2 transforms will result in one of them being overriden.
You can:
1) set two divs, one inside the other, and apply a different transform to the parent and to the child.
2) build the composite transform. In the case of an animation, that means creating composite transforms for each frame.
I'm trying to get my head wrapped around CSS3 transitions, and I'm not sure if there is something wrong with my understanding, or if the browsers aren't cooperating.
First of all, I thought Opera was supposed to have support for transitions, since version 10 or so, but neither transition nor -o-transition seems to do anything in 11.62. Or does Opera use a different syntax?
Anyway, I can make a background color fade in and out on hovering with most other browsers by writing
div {transition:background 2s;}
div:hover {background:lime}
OK so far, and I can also make it so that the background fades in, but not out, by writing
div:hover {transition:background 2s; background:lime}
and that the background fades out, but not in, like so:
div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}
But I don't understand why that happens. According to the docs, a transition with a 0s duration isn't supposed to have any effect, so why does the last one have a different result?
jsFiddle
I assume what you are looking for is the ease timing function.
So your CSS rule should look something like this.
.class {
transition: property(ies) duration timing-function;
}
.class:hover {
property(ies): new value;
}
For Opera you have to define the exact property. In your case it wouldn't be the background property but the background-color property.
From your example it looks like it's behaving as I'd expect it.
The transitions run from one state to another.
I'll try an explain this as best I can.
On the last one you have a trasition of 2s on the <div> in its normal state and a a transition of 0s on the <div> in it's hover state.
So what is happening?
When you hover on the <div>, the state changes to :hover and so the transition for div:hover is run. You have a trasition of 0s so no animation is run.
When you remove the mouse from the <div> the state changes from :hover back to normal, and so the transition for div in its normal state is run. You have this at 2s.
Does this explain what is happening and how the transitions work?