I know css animation have a shorthand of -webkit-animation:
div {
-webkit-animation-name: example;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
we can use the shorthand for the animation code:
div {-webkit-animation: example 1s ease 0 2 alternate;}
But it seems that -moz-animation didn't work in my experiment. Is that true?
div {-moz-animation: example 1s ease 0 2 alternate;} //did not work in my experiment
there is a -moz-animation extension.
here is the full list of extensions for Mozilla browsers:
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
Related
I made a background-image slider which works well in Chrome and Edge but not in Firefox.
In Chrome the background images changes to another image and the transition goes smooth (like it should be). But in Firefox there is no visible 'smooth' transition. The background images are changing but the transition is instant.
I already put the vendor prefix in my CSS:
-webkit-animation: hero-slider 15s infinite;
-moz-animation: hero-slider 15s infinite;
-ms-animation: hero-slider 15s infinite;
animation: hero-slider 15s infinite;
I also defined the four different animations with the prefix:
#-webkit-keyframes hero-slider
{}
#-moz-keyframes hero-slider
{}
#-ms-keyframes hero-slider
{}
#keyframes hero-slider
{}
I also tried this:
-webkit-animation: hero-slider 15s;
-moz-animation: hero-slider 15s;
-ms-animation: hero-slider 15s;
animation: hero-slider 15s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
Firefox version: 82.0.3
Chrome version: 86.0.4240.198
Edge version: 86.0.622.69
Do you have any suggestions why the transition is not smooth in Firefox?
Thanks in advance!
I would like to make a text from my div class "fadeOut" to disappear after being displayed for 2 sec.
Is there a simple way to do that with a css transition ?
$('#errMsg').append('<div class="fadeOut">Beware</div>')
Looks like you are using jQuery
try this
$('#errMsg').append('<div class="fadeOut">Beware</div>').delay(2000).fadeOut();
If you need a pure CSS solution try this
#errMsg {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
opacity:0
}
}
<div id='errMsg'>This is will hide after 5 seconds</div>
You can use the css transition property transition-delay:
.element {
transition-delay: 3s;
}
Here is a list of applicable transition properties:
/* property name | duration | timing function | delay */
transition: all 4s ease-in-out 1s;
You can read more about transition delays here:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
Here's a fiddle to play with: https://jsfiddle.net/qgchhn99/
I'm trying to delay an animation as well as a transition but it doesn't work for some reason. The animation and the opacity transition runs instantly instead of waiting 4 seconds.
I got a status message which appears when a form is submitted (the classes gets added dynamically):
<p class="success success--auto-hide">Some message</p>
Then I have this animation which will hide the element after 4 seconds:
#-webkit-keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
#keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
However, I also want the hiding to be smooth so I added a transition on opacity as well as the hiding animation:
.success {
color: green;
opacity: 1;
-webkit-transition-delay: 4s;
transition-delay: 4s;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
.success--auto-hide {
opacity: 0;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation: cssAnimation 0s ease-in 4s forwards;
-moz-animation: cssAnimation 0s ease-in 4s forwards;
-o-animation: cssAnimation 0s ease-in 4s forwards;
animation: cssAnimation 0s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
I'm sure I'm close to having it correct, so how should I modify it so that both the animation and transition waits 4 seconds before it executes?
With the .success--auto-hide class you've already hidden the element before the animation begins, with 'opacity: 0;'.
When you remove it, it works fine!
Also, you're giving the delay time now two times, so you can also remove the animation-delay property.
See here: http://codepen.io/anon/pen/WvKjWY
I managed to solve it by increasing the animation duration from 0s to 4s. Having it at 0 caused the hiding animation to execute instantly, thus preventing the opacity transition to run in parallel with the animation. I also decreased the opacity duration to 3s instead of 4s to allow it to be completely hidden before setting the width and height to 0, which would cause the text to jump down in an oddly fashion for a split second before it became completely hidden.
I also realised that I had already set the delay in the shorthand so I could remove the animation-delay property altogether.
.success {
color: green;
opacity: 1;
-webkit-transition-delay: 3s;
transition-delay: 3s;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
.success--auto-hide {
opacity: 0;
-webkit-animation: cssAnimation 4s ease-in 4s forwards;
-moz-animation: cssAnimation 4s ease-in 4s forwards;
-o-animation: cssAnimation 4s ease-in 4s forwards;
animation: cssAnimation 4s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
I want to apply css animation on image only twice on mouseover
#keyframes vibrate
{
0% {transform: rotate(10deg)}
25% {transform: rotate(-10deg)}
50% {transform: rotate(0)}
75% {transform: rotate(10deg)}
100% {transform: rotate(0)}
}
But nothing seems to work. See DEMO
You need to have the -webkit- and -moz- prefixes on the #keyframes too.
So all of the #keyframes will have 3 copies, 2 with the prefixes and 1 without.
Also in the animation shorthand definition instead of infinite use the number of the times you want the animation to happen, 2.
Demo https://jsfiddle.net/ju4cuzqL/7/
You should set the animation-iteration-count: 2; if you want to control the number of iterations it runs.
DEMO
Also you have the animation explicitly running infinitely many times:
-webkit-animation: vibrate 0.1s linear 0s infinite both;
is the same thing as:
{
animation-name: vibrate;
animation-duration: 0.1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: both;
}
Your infinite property should be 2 instead:
animation: vibrate 0.1s linear 0s 2 both;
-webkit-animation: vibrate 0.1s linear 0s 2 both;
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 3 years ago.
I am attempting a simple transform on a shape in CSS (webkit specifically).
The animation runs as expected but upon completion the div will revert to its initial state.
Is there any way to have it remain in its final state?
Heres my CSS thus far:
#-webkit-keyframes rotate-good {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-90deg);
}
}
#-webkit-keyframes rotate-bad {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(90deg);
}
}
#good-arrow
{
-webkit-animation-name: rotate-good;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
}
#bad-arrow
{
-webkit-animation-name: rotate-bad;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
}
A briefer way to do this is to add:
-webkit-animation-fill-mode: forwards;
which retains the final keyframe state.
Update: full cross browser
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
the cross-browser solution is:
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
What Madara Uchiha comments above is not always possible for one reason: Imagine instead of starting the animation right away (animation-delay:0s) you want 10 sec of delay before it starts. If so, you would see the final state of your animated element for 10 sec, and then the animation would take it to de 0 keyframe to 100 keyframe transition, but always you are seeing for 10 seconds the ending state.
Oh, that's easy, simply set all the css rules to the finishing result.
Example