I have an object that has an animation when the page is loaded:
.logo-mark {
-webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
-moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
-ms-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000);
}
At a certain time, I want JavaScript to turn on a specific animation that occurs endlessly, until JavaScript stops said animation. So I simply made another class named .logo-loading, and at certain times, jQuery does an addClass and a removeClass.
.logo-loading {
-webkit-animation: spin 4s infinite linear;
-moz-animation: spin 4s infinite linear;
-ms-animation: spin 4s infinite linear;
animation: spin 4s infinite linear;
}
However, when JavaScript removes the class, the object just keeps rotating no matter what. Is there anything I can do here?
You can just override that CSS properties with "none" to every animation
function stopAnimation(element)
{
$(element).css("-webkit-animation", "none");
$(element).css("-moz-animation", "none");
$(element).css("-ms-animation", "none");
$(element).css("animation", "none");
}
so you can stop animation simply calling this function...
If you want to pause an animation (and then resume from the point that it was paused) you could toggle it's play state with this CSS property:
.paused {
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state: paused;
}
You could then use jquery to toggle the paused class:
$("#animatedElement").click(function(e){
$(e.currentTarget).toggleClass("paused");
});
See this example that actually pauses without javascript:
http://jsfiddle.net/fRzwS/
And this post on forrst from the fiddle's author:
http://web.archive.org/web/20120614200555/http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7
This works as you'd expect in Firefox, see this jsFiddle:
http://jsfiddle.net/hNuSd/
So I modified your example (only retained -moz- ones as it's Firefox) to 1s cycles, I start the spinning and then end it after 3.6s. It all works fine, Firefox 11.0 on Xubuntu 11.10.
If you are not using Firefox, can you try in Firefox to confirm they (both your and my examples) work there on your machine? It might be a browser-specific "feature".
Related
I have a flash message div at the top of my page for when the site wants to display any messsages to the user.
I want the flash message to fade out after a couple of seconds. I'm using a CSS transition.
Here is my code:
.flash {
position: fixed;
opacity: 1;
visibility: visible;
transition: opacity 2s ease-in, visibility 2s ease-in;
}
.hide {
visibility: hidden;
opacity: 0;
}
document.querySelectorAll('.flash').forEach(function(flash){
flash.classList.toggle('hide');
})
I expect that when the page loads, the div will be visible before fading out. But, in Safari, when the page loads, .flash is invisible.
In Chrome, the page loads and the .flash div fades as expected. However, on reloading the page, the div still has the .hide class attached and so the flash message remains invisible. (I can store state in HTML?!!) Strangely, in Chrome, it works if I'm inspecting an element in the document with developer tools when I reload the page.
Now I'm highly confused.
Why does .hide remain attached to the div across page reloads?
Why does Safari fail to display the div at all?
EDIT: after your comment reply, what you need to do is trigger the fadeout on a focus event.
.flash:focus {
//use the fadeout code here
}
The reason is the toggle, your browser saves the state of the page in the browser's cache but not the javascript that is dynamically changing the css on reload, on and off.
Instead of manipulating the css with javascript, google fade out with css.
.fade-out {
animation: fadeOut ease 10s;
-webkit-animation: fadeOut ease 10s;
-moz-animation: fadeOut ease 10s;
-o-animation: fadeOut ease 10s;
-ms-animation: fadeOut ease 10s;
}
#keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
it's a lot smoother this way, and you can test it more easily with the developer tools.
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
I got this question because i faced this problem many times and the only thing i can think off is the "hardware acceleration" of mobile devices is different than the one of a computer based browser.
The problem what i'm talking about is that if you make a animation of css, the time you put in as seconds shows different on mobile devices.(its like 10x faster.)
If you make a class or id with the line:
-webkit-animation:keyFrameName 10s infinite;
It wil be on mobile device like 1s and on laptop 10s.
Any one knows a solution to sync the time of a laptop browser and device browser?
All things are welcome, it's just a question that might change some things for the developer world.
Edit 1:
The keyframes are like this:
#-webkit-keyframes RAani{
0%{opacity:1.0;}
50%{opacity:0.25;}
100%{opacity:1.0;}
}
#-moz-keyframes RAani{
0%{opacity:1.0;}
50%{opacity:0.25;}
100%{opacity:1.0;}
}
#keyframes RAani{
0%{opacity:1.0;}
50%{opacity:0.25;}
100%{opacity:1.0;}
}
Try this
-webkit-animation: keyFrameName 10s infinite;
-webkit-animation-timing-function: linear;
-moz-animation: keyFrameName 10s infinite;
-moz-animation-timing-function: linear;
-o-animation: keyFrameName 10s infinite;
-o-animation-timing-function: linear;
animation: keyFrameName 10s infinite;
animation-timing-function: linear;
I'm doing a pendulum animation over a parachute cat (for the lol), but its more smooth when its moving to left. All ease options has the same problem as far as i can tell. I can make this in pure javascript but css used to be more smooth and less CPU consuming.
Test: http://jsfiddle.net/sombra2eternity/qmb2qhz4/2/
transform-origin:50px 5px;
transition:transform 1s ease-in-out 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;
Note: Not working at all in Firefox (33), bug opened: https://bugzilla.mozilla.org/show_bug.cgi?id=1095916
You need to add
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
The transition timing function is not applied to the animation, hence your tests not showing any differences. And you want ease-in-out to get it smooth at both ends.
http://jsfiddle.net/ww31468f/
I have CSS keyframe animations that are triggered by scroll behavior. If the user is scrolling too fast, I'd like to be able to send some of the animations to their 'finished/final' state using JavaScript given that the animations build off of each other.
Say I have a 3000ms animation that I decide I want to finish after 1500ms has passed -- Is it possible to force this CSS keyframe animation to finish early using JS?
** PS -- I'm not talking about persisting the final frame's properties using the forwards fill-mode.
Thanks!
How about using class to control status like this:
.play{
animation: animationFrames ease 5s;
-webkit-animation: animationFrames ease 5s;
-moz-animation: animationFrames ease 5s;
-o-animation: animationFrames ease 5s;
-ms-animation: animationFrames ease 5s;
}
.end{
transform: translateX(100px);
-moz-transform: translateX(100px);
-webkit-transform: translateX(100px);
-o-transform: translateX(100px);
-ms-transform: translateX(100px);
}
JavaScript
$('#end').click(function(){
$('#box').removeClass('play').addClass('end');
});
http://jsfiddle.net/a2Gsh/
Yes, simply change the animation duration to conclude the animation faster,
elementWithAnimation.style.animationDuration="1500ms";
You will need browser prefixes, for example for webkit:
elementWithAnimation.style.webkitAnimationDuration="1500ms";