Need to find a function in javascript flash, or css. that will alow me to rotate an image of a windmill at several different speeds. These speeds need to change with a real world wind speed.
You could easily accomplish this with CSS transitions. I'll give you a few tips to get you started.
Read this article. And here is a quick demo for you (webkit only).
Start out by defining you animation, call it spin, goes from 0 to 360 deg.:
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
Then, on the windmill image apply the animation, iteration, and timing function:
.windmill{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Then define your speeds (you will need to calculate these based on the image size, and wind speed formula):
.windmill.mph-0 { -webkit-animation-duration: 0s; }
.windmill.mph-10 { -webkit-animation-duration: 10s; }
.windmill.mph-20 { -webkit-animation-duration: 5s; }
Now you use javascript to apply the wind speed changes:
$('.windmill').addClass('mph-10'); // stats spinning at 10 mph
Related
I want to rotate an image for a specific time (for example 2 seconds) and with a specific speed and then the rotation gets slower until it stops.
I am not an expert, I just know how to rotate and image with css, but not with a given speed and and ending.
Give this a try. Using keyframes is a good way to build an animation. The animation will run for 2 seconds. The ease out property makes the animation end smoothly.
The forwards property keeps the image from reverting back to its original orientation.
<img src="" class="rotation-class" />
.rotation-class {
width: 200px;
animation: rotate-animation 2s ease-out forwards;
}
#keyframes rotate-animation {
from {transform: rotate(0deg);}
to {transform: rotate(90deg);}
}
To make the animation faster shorten the length of the animation. You can also use percentages in your keyframes animation to further customize your animation.
#keyframes rotate-animation {
10% {
transform: rotate(0deg);
}
20% {
transform: rotate(90deg);
}
100% {
transform: rotate(90deg);
}
}
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'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";
I am experimenting with WebKits animations.
Is it possible for a HTML element to have more than one animation executing at the same time?
For example:
#-webkit-keyframes FADE
{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes TRICKY
{
0% {
-webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
}
50% {
-webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
}
75% {
-webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
}
100% {
-webkit-transform: translate(0px,0) rotate(0) skew(0,0);
}
}
// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
-Webkit-animation-name: FADE TRICKY;
-Webkit-animation-duration: 5s 2.5s;
}
The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.
Is this possible...
//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
#-webkit-keyframes FADETRICKY
{
FADE TRICKY;
}
#myEle {
-Webkit-animation-name: FADE,TRICKY;
-Webkit-animation-duration: 5s,2.5s;
}
Use ',' no space. I was in Chrome version 16.0.899.0 to try.
You'll have to manually merge the animations, I think.
If you need to use something like this in several places I'd take a look at Less CSS or similar, so that you can use "mixins" (e.g. functions) to generate css. I use it for abstracting vendor specific css so that in the main .less file 5 or 6 lines of browser specific code can be replaced by one method.