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'm trying to understand the mixing concept in the materializecss mixins found: http://materializecss.com/sass.html#mixins
I think the ones you'll need if you don't want to go to the page:
animation($args)
animation-delay($delay)
animation-direction($direction)
animation-duration($duration)
animation-fill-mode($mode)
animation-iteration-count($count)
animation-name($name)
animation-play-state($state)
animation-timing-function($function)
so say I'm using Animate.css and ngAnimate and I have the following animation:
&.ng-enter {
-webkit-animation: slideInLeft 1s;
-moz-animation: slideInLeft 1s;
-ms-animation: slideInLeft 1s;
animation: slideInLeft 1s;
}
&.ng-leave {
-webkit-animation: slideOutLeft 1s;
-moz-animation: slideOutLeft 1s;
-ms-animation: slideOutLeft 1s;
animation: slideOutLeft 1s;
}
how would this be in the mixin thingy?
I have an element with a background image that simply moves up and down using css transitions. At some points in the animation the image goes slightly blurry. The graphic is more pixel art so it's really noticeable.
Is there any way I can have a smooth animation without the edges going blurry?
Additionally, is there any way to make Firefox animations smoother?
UPDATE (ignore code below): http://codepen.io/anon/pen/gpMvzb
#elem {
width: 152px;
height: 68px;
-webkit-animation-name: Floating;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-webkit-transform: translateZ(0);
}
#-webkit-keyframes Floating {
from {-webkit-transform:translateY(0); }
50% {-webkit-transform:translateY(2px);}
to {-webkit-transform: translateY(0);}
}
#-moz-keyframes Floating {
from {-moz-transform:translateY(0);}
50% {-moz-transform:translateY(2px);}
to {-moz-transform: translateY(0);}
}
I have the following animation code...
.a {
background: url(../Images/experience-1.jpg) center center no-repeat red;
z-index: 7;
-webkit-animation-delay: 3s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 3s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 3s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 3s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.b {
background: url(../Images/experience-2.jpg) center center no-repeat yellow;
z-index: 6;
-webkit-animation-delay: 18s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 18s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 18s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 18s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.c {
background: url(../Images/experience-3.jpg) center center no-repeat pink;
z-index: 5;
-webkit-animation-delay: 33s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 33s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 33s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 33s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.d {
background: url(../Images/experience-4.jpg) center center no-repeat green;
z-index: 4;
-webkit-animation-delay: 48s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 48s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 48s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 48s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.e {
background: url(../Images/experience-5.jpg) center center no-repeat orange;
z-index: 3;
-webkit-animation-delay: 63s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 63s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 63s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 63s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
.f {
background: url(../Images/experience-6.jpg) center center no-repeat purple;
z-index: 2;
-webkit-animation-delay: 78s;
-webkit-animation-duration: 5s;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: 78s;
-moz-animation-duration: 5s;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: 78s;
-o-animation-duration: 5s;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: 78s;
animation-duration: 5s;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
...and what I want to do is to make it easier in future to change the values.
Just to explain that each class is applied to a div with a background image and each div is absolutely positioned on top of each other. So fading out the top div will show the other div below it.
The initial animation delay is 3 seconds and then the duration for each div is always 5 seconds.
But for each class I'm delaying the animation by the same amount of time it takes the previous animation to finish.
So the .b{} class is set to delay by 18 seconds. The way this is worked out is: the first animation has a 3 second delay + 5 second duration, which equals 8 seconds in total + 10 seconds extra for the user to properly see the next image.
So the c.{} class is set to delay by 33 seconds. And again the algorithm is: the second animation has a 18 second delay + 5 second duration, which equals 23 seconds in total + 10 seconds extra for the user to properly see the next image.
So this is the premise of the animation and I need to work out how to automate this via Sass (in case the client says "you know what, I want the duration to be 10 seconds now").
Thanks in advance for any help you can give me.
Step 1. Wrap it in a mixin, track duration with variables
For starters, you can wrap the whole block in a mixin and use some variables (global, so be careful) to track total duration and animation index:
$queue-max-z-index: 7;
$queue-total-delay: 0;
$queue-index: 0;
#mixin queue-animation($class, $color, $delay: 0, $duration: 5s, $viewing-time: 10s) {
.#{$class} {
background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
z-index: $queue-max-z-index - $queue-index;
-webkit-animation-delay: $queue-total-delay + $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: fadeout;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: $queue-total-delay + $delay;
-moz-animation-duration: $duration;
-moz-animation-name: fadeout;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: $queue-total-delay + $delay;
-o-animation-duration: $duration;
-o-animation-name: fadeout;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: $queue-total-delay + $delay;
animation-duration: $duration;
animation-name: fadeout;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
$queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
$queue-index: $queue-index + 1;
}
}
Now you can set up your animations like this:
#include queue-animation(a, red, 3s);
#include queue-animation(b, yellow);
#include queue-animation(c, pink);
#include queue-animation(d, green);
#include queue-animation(e, orange);
#include queue-animation(f, purple);
The function default values represent global defaults that you can override for an individual animation. Also note that it automatically tracks the count (index) of animations set up and the total duration of said animations, so you can alter the duration or delay on any one and all the subsequent animations will be updated.
Step 2. Clean up those prefixes
To refactor a little more, you could include a little helper I use for vendor prefixed properties:
// Apply common prefixes to a property.
#mixin prefix($property, $value, $apply-to: property, $prefixes: -webkit -khtml -moz -ms -o) {
#if $apply-to == property {
#each $prefix in $prefixes {
#{$prefix}-#{$property}: $value;
}
} #else if $apply-to == value {
#each $prefix in $prefixes {
#{$property}: $prefix + -$value;
}
} #else if $apply-to == both {
#each $prefix in $prefixes {
#{$prefix}-#{$property}: $prefix + -$value;
}
}
#{$property}: $value;
}
And now your function looks like this:
#mixin queue-animation($class, $color, $delay: 0s, $duration: 5s, $viewing-time: 10s) {
.#{$class} {
background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
z-index: $queue-max-z-index - $queue-index;
#include prefix(animation-delay, $queue-total-delay + $delay);
#include prefix(animation-duration, $duration);
#include prefix(animation-name, fadeout);
#include prefix(animation-fill-mode, forwards); /* this prevents the animation from restarting! */
$queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
$queue-index: $queue-index + 1;
}
}
Step 3. Use the animation shorthand
Going a step further, you can use the animation shorthand:
#mixin queue-animation($class, $color, $delay: 0s, $duration: 5s, $viewing-time: 10s) {
.#{$class} {
background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
z-index: $queue-max-z-index - $queue-index;
#include prefix(animation, fadeout $duration ($queue-total-delay + $delay) forwards);
$queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
$queue-index: $queue-index + 1;
}
}
Humble disclaimer
I am still relatively new to Sass, so my advice is subjective and may not be in line with best practices. It's up to you how far you're happy to go with this, though, so feel free to ignore or modify any suggestions that make you feel uncomfortable.
Don't bother, there's a Compass plugin that will do it for you. That exact same code is being pulled into the Compass Core for the next release, so soon you wont even need to use a plugin. You get the added advantage that other people will help keep your animations code up-to-date. While you're at it, you can pull in the Compass port of Dan Eden's Animate.css.
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