I do not understand the difference between -webkit-animation and -moz-animation. What is the difference in between the two or these, or are the same?
I googled this question but couldn't find out the differences.
Here is the code example:
.blink_me {
font-size:60px;
font-weight:bold;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-moz-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
Here in this code -webkit-animation ,-moz-animation and at last the simple animation is used why these three are being used with same functionalities?
These are the vendor-prefixed properties used by different rendering engines of browsers(gecko,blink,webkit,trident etc)
-webkit for Chrome(blink,webkit), Safari(webkit) and Opera(blink);
-moz for Firefox(gecko),
-o for Opera(presto),
-ms for Internet Explorer(Trident).
Usually they're used to implement CSS features that are proprietary or the browser companies are still fighting over on the way it is supposed to be implemented, until finalisation by W3.
Using prefixes allows properties to be set to each rendering engine so you can tweak your css to adjust for the different implementations.
In theory after the inconsistencies are resolved the prefix will be removed. However there are always older versions of the browser you need to write and support CSS code for, so in practice it will take a lot of time before you can drop the prefix.
Also note that it's convention to declare the prefixed version first and then the standard version, so if and when the specifications are updated, the standard version will override the prefix versions
Related
Hello I am trying to animate an element so that it spins 7 times then slows down and eases I have the spinning done I just need to ease it. I am using a from and to keyframe to spin it, would I need to do it frame by frame or is there another way?
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: linear;
}
You mean like this:
.spin {
width:100px;
height:100px;
background:red;
}
#-webkit-keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(2520deg);
}
}
.spin.animated {
-webkit-animation-name: spin;
-webkit-animation-duration: 2800ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
}
<div class="spin animated"></div>
Or even better:
.spin {
width:100px;
height:100px;
background:red;
}
.spin:hover {
transform:rotate(2520deg);
transition: transform 3s ease-out;
}
<div class="spin"></div>
In the to, give another animation:
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
animation: ease;
}
}
#keyframes ease {
}
You might need to tackle the iteration count here. It should happen only after the 7 animations. So, I am not sure about that.
You have it pretty much all the way there.
.spin.animated {
animation-name: spin;
animation-duration: 400ms;
animation-iteration-count: 7;
animation-timing-function: ease; /* your timing function is where you tell it how to animate */
}
here is list of all available calls:
http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
You can do it with a cubic bezier timing function.
Something like
cubic-bezier(0.81, 0.95, 0.84, 0.95)
will give an effect like the one that you are searching. There is a linear animation most of the time, and then it slows down
You can try different values, and set it graphically, here
bezier curve tester
I have been having trouble understanding how css3 rotations work. I have seen many examples and tried to implent my own, but to no avail. My goal is to have a link spin a single character I.e. text >> (+) on click. What I want to achieve is to have the animation start farily slow speed up rapidly then stop all in a couple seconds or less.
I don't know if that is particularly possible with Css3, if not I will use Jquery. However I have tried to wrap my head around the keyframes thing. I know I need a kit for each browser specifically to create the animation and add the attributes. After which I need to set the rules for keyframes and rotation degrees. But every time I try to write the code I get errors almost as if it's a syntax error. (somehere in here apparently.)
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
I have spent almost an hour looking at that specific code, not a single syntax error. If anyone that can help with my problem would I would be greatful.
Js Fiddle
This is basically what I am after but I want to click and spin it.
Reduce the duration to speed it up.
animation-duration: 2000ms;
Animation timing function will give you the faster spin near the end of the animation.
animation-timing-function: ease-in;
For this to be a bit more flexible I'd separate your animation CSS3 from the div and into its own class so you can add it on the initial click.
div.spin {
-webkit-animation-name: spin;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-moz-animation-name: spin;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-ms-animation-name: spin;
-ms-animation-duration: 2000ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-in;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}
You'll need to use javascript to trigger the animation on click and to restart the animation.
var $div = $("div");
$div.click(function (e) {
// restart animation
$(this).addClass("spin");
var el = $(this),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
});
See the full working example here
I'm trying to display an element, wait 1second and then fade out the element using css3 transitions.
Here is what I have:
.el {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225ms;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
#-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.el {
opacity: 0;
-webkit-animation-duration: 500ms;
-webkit-animation-name: fadeout;
-webkit-animation-delay: 1000ms;
-moz-animation-duration: 500ms;
-moz-animation-name: fadeout;
-moz-animation-delay: 1000ms;
animation-duration: 500ms;
animation-name: fadeout;
animation-delay: 1000ms;
}
I thought animation-delay would be the way to go, but doing it like this, the element appears after 1000ms instead of fading out after 1000ms.
Any idea how to delay the fadeout?
Thanks!
Why not add the extra delay time to your animation duration:
-webkit-animation-duration: 1500ms;
Where ~66%(1000ms) of the time is a delay:
#-webkit-keyframes fadeout
{
0% { opacity: 1; }
66% { opacity: 1; }
100% { opacity: 0; }
}
Note that i used this time as an example. You can calculate the percentage of the delay yourself
jsFiddle
I hope this is what you meant.
Even though there is already a correct answer, let me enumerate what you options are.
You want an element to begin at opacity of 1, and stay like this for a second. Then, you want to fade it away to opacity of 0 during 0.5 s. And you want it to stay at opacity 0 forever.
The problem here is that the initial state and the final state are differents, so the base state of the element can not be both (of course!).
If we make the base state opacity 0, the problem is at the beginning. We can solve it as in nkmol solution. (starting the animation right away. We can also leave the animation only for the 0.5s where the opacity changes, and change the opacity usiong animation-fill-mode: backwards;
Also, you could set the base element to opacity 1. Then the problem is to make the final opacity 0; that can be done set animation-fill-mode: forwards;
I would like to know how to avoid the keyframe animation to be automatically reseted after launching anoher one or visiting another tab of my browser.
#-webkit-keyframes play1 {
0% {
-webkit-transform: translate(0px,0);
}
50% {
-webkit-transform: translate(-60px,0) rotate(-1080deg) scale(1.5);
}
100% {
-webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
}
}
.play1 {
-webkit-animation-name: play1;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#-webkit-keyframes play2 {
0% {
-webkit-transform: translate(0px,0);
}
50% {
-webkit-transform: translate(-60px,0) rotate(-1080deg) scale(3);
}
100% {
-webkit-transform: translate(-120px,0) rotate(-2060deg) scale(1);
}
}
.play2 {
-webkit-animation-name: play2;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
On this example, if i launch the animation play1 then play2 by adding the respective classes on the elements, the position of the element accoding to the play1 animation is automatically reseted to its initial position (if i visite another tab and come back, all my elements are in their initial position), how to avoid this?
Even worse on mozilla, the animation is reseted when its over.
I don't have this behavior by using the animation-iteration-count: infinite; property, but i just want to play it one time.
The property which enables this is: animation-fill-mode: forwards
trying to flash three elements in a row with css3 animations. i've got it running, but there is a fade for each frame and i'd like to remove it. ideally each element stays visible for 1s, then hides immediately.
i've tried setting the animation with frames at 0% and 99% for opacity:1 and 100% for opacity: 0 but still no luck.
i hope theres a way to remove the fade!
webkit js fiddle
CSS:
.motion.play .frame {
-webkit-animation-name: flash;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
.frame:nth-of-type(2) {
-webkit-animation-delay: 1s;
}
.frame:nth-of-type(3) {
-webkit-animation-delay: 2s;
}
#-webkit-keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Just define your animation so that it keeps one state as long as possible and then switches to the other one as fast as possible. Like this:
#-webkit-keyframes flash {
0% { opacity: 1; }
49% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
Use proper animation-timing-function:
http://jsfiddle.net/rfGDD/1/ (WebKit only)
.motion.play .frame {
-webkit-animation-name: flash;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal; /* not "linear" */
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function:steps(3, end);
}
MDN document on fill-mode
MDN document on direction
MDN document on steps() timing function
Edit:
Oops, just realized the logical flaw.
Revised: http://jsfiddle.net/rfGDD/3/ (WebKit only)
In addition to the above change, change the flash animation to following:
#-webkit-keyframes flash {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
The problem is, the animation plays 3 seconds, but each element need to stay in the opacity:0 state after second #1, so I need to split the animation into 2 stages (with the timing length ratio 1:2), so elements can look like they stays in final stage for 2 seconds.
You may keep the opacity for the longest period and change it very quickly.
Try this:
.blinkMe {
animation: blink 1s linear infinite;
}
#keyframes blink {
0%,50% {
opacity: 0;
}
51%,100% {
opacity: 1;
}
}