I was wondering if anyone knew of a way to pause (or put adjust the timing of an event at a certain point) a CSS3 animation?
Lets say I had a circle that bounced, and I wanted it to take 2 seconds to reach its highest point, and either pause (or put a long time) it at its highest point, then depending if it is paused/frozen or on a long interveral have it return to its original positition. Thanks for any help in advance.
CSS Animation Keyframes may solve your problem.
.whatever{
-webkit-animation: bouncepause 10s infinite;
}
#-webkit-keyframes bouncepause {
0% {
bottom:0;
}
5% {
bottom:200px;
}
95% {
bottom:200px;
}
100% {
bottom:0;
}
}
I included only -webkit- vendor prefixes to keep it simple.
Demo
Related
I’m trying to use Compass animation mixin with multiple animations. Is this possible?
I’ve tried #include animation(an-1 5s infinite, an-2 10s infinite), but I’m getting an error: Mixin animation takes 1 argument but 2 were passed.
Your compass syntax is correct and works in the current version of compass. Maybe this wasn’t the case in a previous version.
Demo on Codepen
Though you can always combine both animations into one (if both animations should use the exact same options, e.g. easing):
#include animation(an-3 5s ease-in infinite);
#include keyframes(an-3) {
from {
transform: scaleY(0);
opacity: 0;
}
to {
transform: scaleY(1);
opacity: 1;
}
}
I am trying to get a <div> element to rotate constantly on the spot using CSS3. I have a jsFiddle all set up with the HTML and CSS3 but it's not doing a thing. Any help?
http://jsfiddle.net/8FUK8/
Please note I am testing in Chrome and therefore only using the -webkit- prefix at the moment.
do the same thing for keyframe change #keyframes to #-webkit-keyframes
I answered a similar question recently. Here's a jsfiddle for your convenience. You can fine-tune the styles to fit your needs, but the rotation styles will be left intact.
You should use animation and #keyframes compatibility selectors. for example
-moz-animation:1s foo infinite alternate;
-ms-animation:1s foo infinite alternate;
-webkit-animation:1s foo infinite alternate;
#-moz-keyframes foo {}
#-ms-keyframes foo {}
#-webkit-keyframes foo {}
I have the following problem. I wanna reuse the same animation two times, with different delays on the same element. I tried the following but it doesn't work:
.myClass{
-webkit-animation: animationName 1s linear 2s, animationName 1s linear 4s;
}
The strange thing, and what I don't get is that if I create a second animation, say "animationName2" with the same content like animationName then the following would work:
.myClass{
-webkit-animation: animationName 1s linear 2s, animationName2 1s linear 4s;
}
Am I missing something? Thanks
According to css-infos.net there should be 6 attributes. you have 4.
These are:
-webkit-animation: <name> <duration> <timing_function> <delay> <iteration_count> <direction>
I guess there are default values for the iteration count and direction, but CSS is a biatch some days. I take it that your actual class is called what you think it's called myClass in this case? All the usual debugging stuff.
how do you do non-linear animation with css3?
Basically, if I need to bring a box in from out of the view port, and its a straight down path, then its easy enough to do with the following code:
*{
transition: transform 0.5s ease-in;
}
-- And some JS to trigger the animation with a transform: translate3d(0,300px,0);
But what happens when the element is rotated? Say by 25 deg? Then for the animation to look somewhat natural, it'll need to progress in a 25 deg offset line, and cannot just be top-down, or left-right animations...
I hope I'm making sense here... Look at the demo here http://jsfiddle.net/YMHT4/8/
I'm trying to get the blue box to animate in on a slanted path...
I'm not sure if I'm understanding correctly, but if you're trying to do what I'm thinking, then the answer is quite simple:
function ani()
{
if (!state)
{
$('#otherbox').css('-webkit-transform', 'translate3d(100px,150px,0) rotate(25deg)');
state=true;
}
else
{
$('#otherbox').css('-webkit-transform', 'translate3d(0,0,0) rotate(25deg)');
state=false;
}
}
If you change both x and y in translate3d(x,y,z), then both dimensions will animate, and you will get a diagonal path animation.
http://jsfiddle.net/YMHT4/17
I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has finished before it does the next rotation.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#loading img
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
I have tried changing the animation duration but it makes no difference, if you slow it right down say 5s its just more apparent that after the first rotation there is a pause before it rotates again. It's this pause I want to get rid of.
Any help is much appreciated, thanks.
Your issue here is that you've supplied a -webkit-TRANSITION-timing-function when you want a -webkit-ANIMATION-timing-function. Your values of 0 to 360 will work properly.
You also might notice a little lag because 0deg and 360deg are the same spot, so it is going from spot 1 in a circle back to spot 1. It is really insignificant, but to fix it, all you have to do is change 360deg to 359deg
my jsfiddle illustrates your animation:
#myImg {
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
Also what might be more resemblant of the apple loading icon would be an animation that transitions the opacity/color of the stripes of gray instead of rotating the icon.
You could use animation like this:
-webkit-animation: spin 1s infinite linear;
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg)}
100% {-webkit-transform: rotate(360deg)}
}
If you're only looking for a webkit version this is nifty: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html from http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
Your code seems correct. I would presume it is something to do with the fact you are using a .png and the way the browser redraws the object upon rotation is inefficient, causing the hang (what browser are you testing under?)
If possible replace the .png with something native.
see; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
Chrome gives me no pauses using this method.
I made a small library that lets you easily use a throbber without images.
It uses CSS3 but falls back onto JavaScript if the browser doesn't support it.
// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);
// Start the throbber.
throbber.play();
// Pause the throbber.
throbber.pause();
Example.