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/
Related
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 have some elements which width changes to 0 with JS on scrolling and when transition width to 0 is beginning, elements firstly become very big, but then do as need. In Chrome all works perfectly.
Here is an example of this https://jsfiddle.net/dx914ut0/
What sholud I do?
UPD: Just need to add units.
Instead of just transition try using the code below. This will make sure it works on every browser.
-webkit-transition: visibility 0s, opacity 2s ease-out;
-moz-transition: visibility 0s, opacity 2s ease-out;
-o-transition: visibility 0s, opacity 2s ease-out;
transition: visibility 0s, opacity 2s ease-out;
try function onscroll in your html:
<div onscroll="topFunction()" id="myBtn" title="Go to top"></div>
except if you want this to happen on click, then you should probably add actionListiner or something.
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 have a div #im1 with initial position left:-300px;
When a button .abtme_link is clicked the javaScript changes it's position to 443px;
It's working on every other browser than Firefox; I've seen some other posts on this matter but can't seem to make it work;
One of the thread concluded that css transition doesn't work on Firefox, If that's the case; is there a workaround?
#im1{
width:400px;
position:absolute;
left:-300px;
transition:all .9s ease .5s;
-webkit-transition:all .9s ease .5s;
-moz-transition:all .9s ease .5s;
-o-transition:all .9s ease .5s;
-ms-transition:all .9s ease .5s;
}
$('.abtme_link').click(function() {
$('#im1').css('left','443px');
});
OK so I've found a solution,
I've added a delay function in JS and it's working fine. Don't know why or how but it's working.
setTimeout(function(){
$('.im1').css('left','443px');
},10);
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".