I have a fiddle which is a replica of something in one of our products at work. It is working in Chrome and IE but not firefox and I've stared for a while and can't see any reason why not. I'm hoping that asking will cause a brainwave.
It seems to show as a transparent color in Firefox, the fiddle shows values in Chrome and IE.
Cheers,
J
http://jsfiddle.net/qb9unwmh/2/
body {
background: #ff0000;
-webkit-backface-visibility: hidden;
-webkit-animation-duration: 1s;
-webkit-animation-name: taskUrgent;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-duration: 1s;
-moz-animation-name: taskUrgent;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
backface-visibility: hidden;
animation-duration: 1s;
animation-name: taskUrgent;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#-webkit-keyframes taskUrgent {
0% {
background: -webkit-linear-gradient(top, #ff0000 0, #8c0000 100%);
}
100% {
background: -webkit-linear-gradient(top, #8c0000 0, #510000 100%);
}
}
#-moz-keyframes taskUrgent {
0% {
background: -moz-linear-gradient(top, #ff0000 0, #8c0000 100%);
}
100% {
background: -moz-linear-gradient(top, #8c0000 0, #510000 100%);
}
}
#keyframes taskUrgent {
0% {
background: linear-gradient(to bottom, #ff0000 0%, #8c0000 100%);
}
100% {
background: linear-gradient(to bottom, #8c0000 0%, #510000 100%);
}
}
Related
I want to move my gradient that has multiple colors smoothly but the problem is that the animation is not smooth. It just changes its position at every step.
<style>
.animated {
width: 300px;
height: 300px;
border: 1px solid black;
animation: gra 5s infinite;
animation-direction: reverse;
-webkit-animation: gra 5s infinite;
-webkit-animation-direction: reverse;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
#keyframes gra {
0% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
}
50% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);
}
100% {
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57));
background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);
}
}
</style>
<div class="animated">
<h1>Hello</h1>
</div>
Is it possible to accomplish without using jQuery?
My jsfiddle link is https://jsfiddle.net/bAUK6
Please try this code:
#gradient
{
height:300px;
width:300px;
border:1px solid black;
font-size:30px;
background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
background-size: 200% 200%;
-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;
}
#-webkit-keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
#-moz-keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
#keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
<html>
<div id="gradient">
Hello
</div>
</html>
Dynamic implementation of Dave's answer:
:root{
--overlay-color-1: #ff0000;
--overlay-color-2: #0000ff;
--anim-duration: 2s;
}
#gradient {
opacity: 0.8;
background: none;
}
#gradient:after,
#gradient:before {
content: '';
display: block;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
#gradient:before {
background: linear-gradient(135deg, var(--overlay-color-2) 0%, var(--overlay-color-1) 100%);
animation: OpacityAnim var(--anim-duration) ease-in-out 0s infinite alternate;
}
#gradient:after {
background: linear-gradient(135deg, var(--overlay-color-1) 0%, var(--overlay-color-2) 100%);
animation: OpacityAnim var(--anim-duration) ease-in-out calc(-1 * var(--anim-duration)) infinite alternate;
}
#keyframes OpacityAnim {
0%{opacity: 1.0}
100%{opacity: 0.0}
}
<div id="gradient"></div>
Using CSS variables it's now a trivial task.
Here is a basic example (hover to see the result)
#property --a{
syntax: '<angle>';
inherits: false;
initial-value: 90deg;
}
#property --l{
syntax: '<percentage>';
inherits: false;
initial-value: 10%;
}
#property --c{
syntax: '<color>';
inherits: false;
initial-value: red;
}
.box {
/* needed for firefox to have a valid output */
--a:80deg;
--l:10%;
--c:red;
/**/
cursor:pointer;
height:200px;
transition:--a 0.5s 0.1s,--l 0.5s,--c 0.8s;
background:linear-gradient(var(--a), var(--c) var(--l),blue,var(--c) calc(100% - var(--l)));
}
.box:hover {
--a:360deg;
--l:40%;
--c:green;
}
<div class="box"></div>
More details here: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
How about this:
Set the body margin and padding to 0. Set an html rule to 100% height (higher than 100% may be required).
Set the body to the end state for the gradient.
Create an empty div with a background which is the start state for the gradient. Give the empty div 100% height.
Give both the body and the empty div a background-attachment: fixed;
Create a wrapper for your body content.
Set the empty div to position: fixed;
Set the wrapper to position: relative;
Give both a z-index, the wrapper being higher.
Create an animation that will change the opacity of the empty div from 1 to 0 over the desired time. Add animation-fill-mode:forwards; to the div rule so the animation stays where it ends.
It's not as sexy as a real animated gradient shift, but it's as simple as you can get with CSS only and keyframes, I think.
Here is another way. The following has the static gradient containing all phases of the animation, which is then moved inside the outer element. This allows to perform animation smoothly (as the topic suggests), because the only animation here is the element position.
Please note that for the sake of performance the gradient element left unchanged. Although the question was to animate the gradient, moving the background does practically the same thing, while the performance wins!
.animated {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
.innerGradient {
z-index: -1;
width: 300%;
height: 300%;
position: absolute;
animation: gra 5s infinite;
-webkit-animation: gra 5s infinite;
background: linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
background: -webkit-linear-gradient(135deg, #ff670f 0%, #ff670f 20%, #ffffff 50%, #0eea57 80%, #0eea57 100%);
}
#keyframes gra {
0% { left: -200%; top: -200%; }
50% { left: 0%; top: 0%; }
100% { left: -200%; top: -200%; }
}
<div class="animated">
<h1>Hello</h1>
<div class="innerGradient"></div>
</div>
I am trying to build a shimmer loader with CSS3 keyframes animation inside shadow DOM. The shimmer works perfectly in Chrome & Safari, but the animation does not work in Firefox.
Here is a small snippet to reproduce the behaviour.
document.getElementById('myDiv').attachShadow({mode:'open'}).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat !important;
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 200px 0;
}
}
</style>
`
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head></head>
<body>
<div id="myDiv"></div>
</body>
</html>
Animation works only this is a problem with your example. The following example animates the background color and it works in firefox.
document.getElementById('myDiv').attachShadow({
mode: 'open'
}).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background: red;
}
100% {
background: blue;
}
}
</style>
`
<div id="myDiv"></div>
Too much !important :) Remove important from .shimmer -> background
document.getElementById('myDiv').attachShadow({ mode: 'open' }).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat;
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 200px 0;
}
}
</style>
`
<div id="myDiv"></div>
https://jsfiddle.net/2ndjazmy/14/
#keyframes gradient-animation {
from {
background-position: 100% 0%;
}
to {
background-position: 0% 0%;
}
}
.animation{
background: linear-gradient(90deg, #f11e1d, #952491 12.5%, #8cc838 25%, #feb034 37.5%, #f11e1d 50%, #952491 62.5%, #8cc838 75%, #feb034 87.5%);
background-size: 200%;
background-position: 100% 0%;
animation-name: gradient-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
height: 50px;
}
<div class="animation"></div>
I'm trying to make a gradient animation effect, in order to transition into other colours. You can see I almost have it working, but at the end of the animation the colours "skip" back to the beginning. I think it's because I don't have the colour stops set up right, but I'm not sure how to fix it.
You can correct it like this (I added extra values to better see the pattern)
#keyframes gradient-animation {
from {
background-position: 100% 0%;
}
to {
background-position: 0% 0%;
}
}
.animation{
background: linear-gradient(90deg,
#f11e1d 0%, #952491 12.5%, #8cc838 25%, #feb034 37.5%, #f11e1d 50%,
#f11e1d 50%, #952491 62.5%, #8cc838 75%, #feb034 87.5%, #f11e1d 100%);
background-size: 200%;
background-position: 100% 0%;
animation-name: gradient-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
height: 50px;
}
<div class="animation"></div>
But to avoid complex situation you can consider repeating-linear-gradient and you don't have to bother about calculation.
#keyframes gradient-animation {
from {
background-position: 100% 0%;
}
to {
background-position: 0% 0%;
}
}
.animation{
background: repeating-linear-gradient(90deg,
#f11e1d 0%, #952491 12.5%, #8cc838 25%, #feb034 37.5%, #f11e1d 50%);
background-size: 200%;
background-position: 100% 0%;
animation-name: gradient-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
height: 50px;
}
<div class="animation"></div>
It skips because the colors at the two ends of the gradient are different. You can fix this by simply adding an extra color at the end of the gradient that matches the color at the beginning. That is, changing this:
background: linear-gradient(90deg, #f11e1d, #952491 12.5%, ... , #feb034 87.5%);
to this:
background: linear-gradient(90deg, #f11e1d, #952491 12.5%, ... , #feb034 87.5%, #f11e1d 100%);
Example on JSFiddle
I have a header with the background being animated between two images.
header {
margin-top: 80px; /* navbar height */
padding-top: 60px !important;
padding-bottom: 50px !important;
background: rgba(255,215,0,1) !important;
background-size: cover;
/*
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;*/
-webkit-animation: animation-home-background 15000ms infinite;
-moz-animation: animation-home-background 15000ms infinite;
-o-animation: animation-home-background 15000ms infinite;
animation: animation-home-background 15000ms infinite;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
}
#-webkit-keyframes animation-home-background {
25% {background-image: url("../img/header/h2.jpg"); }
50% {background-image: url("../img/header/h1.jpg"); }
100% {background-image: url("../img/header/h2.jpg"); }
}
#keyframes animation-home-background {
25% {background-image: url("../img/header/h2.jpg"); }
50% {background-image: url("../img/header/h1.jpg"); }
100% {background-image: url("../img/header/h2.jpg"); }
}
Now the first image just appears out of the blue. How can I make sure that the first image fades in smoothly from the yellow background color?
I haven't understand exactly what you want because you have used code paths for images related to your project.
Even so, I developed a prototype in JSFiddle which replaces your images by colors and cut off all "!important".
header {
width: 100%;
height: 100px;
background: blue;
-webkit-animation: animation-home-background 15000ms infinite;
-moz-animation: animation-home-background 15000ms infinite;
-o-animation: animation-home-background 15000ms infinite;
animation: animation-home-background 15000ms infinite;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
}
#-webkit-keyframes animation-home-background {
25% {background: red; }
50% {background: blue; }
100% {background: red; }
}
#keyframes animation-home-background {
25% {background: red; }
50% {background: blue; }
100% {background: red; }
}
https://jsfiddle.net/xj9t62a2/
Use "!Important" is a bad practice and can bring you much more complicated problems to solve.
Please look at my code
Html :
`<div id="animated-example" class="animated swing"><div class="navbar"></div></div>`
Css :
.animated {
color: #9f9f9f;
min-height: 300px;
width: 100%;
padding-bottom: 24px;
background: #000000 url(../images/icons.svg) repeat center;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration:15s;
-moz-animation-duration:15s;
-o-animation-duration:15s;
animation-duration:15s;}
.navbar {
position: absolute;
min-height: 300px;
width: 100%;
padding-top: 24px;
background-image: -o-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: -moz-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: -ms-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(-179deg, #000000 0%, rgba(0,0,0,0.00) 100%);
}
#-webkit-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#-moz-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#-o-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
.swing {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation-name: swing;
animation-name: swing;
}
The problem is that the animation does not work in Firefox, but Chrome and other browsers work
Please see the video below, it speaks
http://sendvid.com/b1r3hofg
How about this:
.swing {
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
animation-name: swing;
}
If this doesn't work, while it could be another code issue and you probably already know this, I'll just mention some CSS properties (transitions especially) are browser-dependent (meaning they only work for certain browsers)...although what you are doing seems like it should work.
Whatever the case, I wish you good luck friend! :)
I Fixed it :
#keyframes swing {
0% {
background-position: 0 511px;
}
100% {
background-position:0
}
}