Ok, so I have this example:
http://jsfiddle.net/2uux3jh7/
It works fine on Chrome, but it does not in Firefox. Anyone know why?
HTML uses only one div with .front class. Here's the code for CSS:
.front {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: static;
-webkit-animation: fading 3s infinite;
animation: fading 3s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
font-size: 1em;
-webkit-font-smoothing: subpixel-antialiased;
text-shadow: 0 0 1px rgba(0,0,0,0.3);
-webkit-text-stroke: 1px transparent;
}
#-webkit-keyframes fading {
0%, 35% { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
65%, 100% { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}
#keyframes fading {
0%, 35% { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
65%, 100% { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}
#-moz-keyframes fading {
0%, 35% { background-image: url('http://khongthe.com/wallpapers/people/pretty-woman-65379.jpg'); }
65%, 100% { background-image: url('http://www.inspiringwomen.co.za/wp-content/uploads/2010/08/happy-woman-hd-1080p-wallpapers-download.jpg'); }
}
Unfortunately, Firefox can’t transition background-image.. So you have to do it another way.
Here is another stackoverfow question related to your problem, with some alternatives. :
CSS3 background image transition
Related
trying to change background gradient smoothly from gold-orange - to orange-gold and vice versa
problem - colors are changed suddenly, jumping from one to another
pls help
.box {
width: 140px;
height: 50px;
background: linear-gradient(to right, gold, orange);
animation: back infinite;
animation-duration: 7s;
}
#keyframes back {
0% {
background: linear-gradient(to right, gold, orange);
}
50% {
background: linear-gradient(to left, gold, orange);
}
100% {
background: linear-gradient(to right, gold, orange);
}
}
<div class='box'></div>
You can increase background-size and use background-position for the animation
.box {
width: 140px;
height: 50px;
background: linear-gradient(to right, gold, orange, gold);
animation: back ease infinite;
animation-duration: 7s;
background-size: 200% 200%;
}
#keyframes back {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
<div class='box'></div>
I have some text that I want to animate. The text should change color from white to green from top to bottom. I want the new color to basically drop from the top.
body{
background-color: lightblue;
}
#test {
animation: changeColor infinite;
animation-timing-function: ease-out;
animation-duration: 5s;
font-size: 40px;
color:white;
}
#keyframes changeColor {
0% {
color: linear-gradient(to bottom, white, #2E7D32 50%) bottom;
}
100% {
color: green;
}
}
<div id="test">The</div>
An Example
Source for the below snippet. The following animation occurs on hover, however this is just an example to demonstrate what I wish to achieve. Some changes I require are that the font colour should change from top to bottom and it should use keyframes(animation).
#import url("https://fonts.googleapis.com/css?family=Barlow:800&display=swap");
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "Barlow", sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
a {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: background-position 275ms ease;
text-decoration: none;
}
a:hover {
background-position: 0 100%;
}
Link Hover
background + background-clip might be what you look for:
because of a demo (below) it could not be just a comment :) .
reset the gradient to your needs if you need a sharp color transition
body{
background:lightblue;
}
#test {
animation: changeColor infinite linear 5s forwards;
font-size: 40px;
color:transparent;
background:linear-gradient(to bottom, #2E7D32 , white, #2E7D32 ) bottom left/ 100% 600% ;
background-clip:text;
}
#keyframes changeColor {
to { background-position: top left;
}
}
<div id="test">The</div>
I figured out how to accomplish, so I'm answering my own question.
let titleIDThe = document.getElementById("titleIDThe");
titleIDThe.classList.add("animateColor");
.animateColor {
animation: changeColor infinite;
animation-timing-function: ease-out;
animation-duration: 10s;
background-image: linear-gradient(to bottom, red 50%, #2E7D32 50%);
background-position: 0% 0%;
background-size: 100% 200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
width: 50vw;
height: 50vh;
font-size: 30px;
}
#keyframes changeColor {
0% {
background-position: 0% 0%;
}
20% {
background-position: 0% -100%;
}
30% {
background-position: 0% -100%;
}
50% {
background-position: 0% 0%;
}
100% {
background-position: 0% 0%;
}
}
<span id="titleIDThe">The</span>
I am developing an interactive touchscreen at my work which has four tiles on the main screen that look much like the Windows logo. At the moment they are different static colours and they don't look 'alive' and interactive. I want to make them glow or pulsate slightly in random areas and intervals. I thought about creating a white radial gradient and moving it randomly around the outside of each tile so the tile gradient changed, however, I am not sure how to code this in CSS.
I have tried to adapt some copied code that uses radial gradient animations that cycles through the complete hue gradient. The problem with this is I don't want to change the colours because they form the background for text (which can mess with the contrast). The changes can also be rather dramatic, going from a dark colour to very bright, which again messes with the text contrast.
I have already tried a linear gradient but am not happy with it as it is rather predictable and boring (the same gradient going back and forth).
What I am after ideally would be something like this:
Here is a code snippet of what is currently running:
body,html{
margin:0;
padding:0;
height:100%;
}
.box{
height:100%;
width:100%;
}
.gradDynamic{
position:relative;
}
.gradDynamic:after, .gradDynamic:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
z-index:-1;
}
.gradDynamic:after{
background:radial-gradient(circle,red,transparent);
background-size:400%;
animation:colorSpin 30s linear infinite;
}
.gradDynamic:before{
background-color:yellow;
}
#keyframes colorSpin{
25%{background-position:0 100%}
50%{background-position:100% 100%}
75%{background-position:100% 0}
100%{filter:hue-rotate(360deg)}
}
<div class="box gradDynamic"></div>
I have achieved the animated background with linear gradient background. Lets try this example and comment for further assistance.
.gradient {
height: 400px;
width: 100%;
background: linear-gradient(180deg, #1846c4, #98b2ff, #1846c4);
background-size: 200% 200%;
-webkit-animation: Animation 8s ease infinite;
-moz-animation: Animation 8s ease infinite;
animation: Animation 8s 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%;
}
}
<div class="gradient"></div>
Updated fiddle.
#demo {
width: 100%;
height: 300px;
position: relative;
background: linear-gradient(to bottom, #3bd6f7 0%, #1539b9 100%);
z-index: 2;
}
#demo:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
z-index: -1;
}
#demo::after {
background-size: 400%;
background-size: 400%;
animation: colorSpin 40s linear infinite;
background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.1), transparent);
}
#demo::after {
background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.1), transparent);
}
#keyframes colorSpin {
25% {
background-position: 0 100%
}
50% {
background-position: 100% 100%
}
75% {
background-position: 100% 0
}
100% {
filter: hue-rotate(360deg)
}
}
#demo::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #1539b9 0%, #1539b9 100%);
opacity: 0;
animation: bg 2800ms ease-in-out 3s infinite alternate-reverse;
z-index: -1;
}
#keyframes bg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="demo">Demo</div>
I have created a div which has a gradient background, and I want to change this gradient. I applied a keyframes animation which changed background color instantly. How can I make this change smooth?
div {
width: 100px;
height: 100px;
background:linear-gradient(red, yellow);
animation-name: colorchange;
animation-duration: 5s;
-webkit-animation-name: colorchange;
animation-iteration-count: 5;
-webkit-animation-duration: 5s;
text-align: center;
}
#keyframes colorchange {
0% {background:linear-gradient(red, yellow) }
35% {background:linear-gradient(yellow, green) }
70% {background:linear-gradient(green, red) }
100%{background:linear-gradient(red, yellow)}
}
<div>
Gradient Background
</div>
Try this
div {
text-align: center;
width: 100px;
height: 90px;
color: #fff;
background: linear-gradient(0deg, red, yellow, green);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
#keyframes Gradient {
0% {
background-position: 50% 0%
}
50% {
background-position: 50% 100%
}
100% {
background-position: 50% 0%
}
}
<div> Text </div>
I might be wrong, but gradients don't support transitions.
There's a workaround I found in other related question:
https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
As far as I'm concerned, the smooth transition doesn't work with gradient backgrounds, only with straight colors.
You can create a large gradient background with many colors though, and use the transition to move it. This creates the illusion of the colors changing.
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
<h1>Hello World!</h1>
I am looking for a way to overwrite the background color from the top to bottom. More specifically, I would like it to be filled from top to bottom. Currently I have managed to produce a "faded" animation.
This is what I have now:
.page-dark {
background: #003850;
background-color: #003850;
color: white;
-o-animation: fadeIt 3s linear;
animation: fadeIt 3s linear;
}
#-o-keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
#keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
You can create a background with two colors using linear-gradient(). Set the background height to 200% using background-size, and hide one of the colors using background-position. Now animate the background position to show the other color:
.page-dark {
height: 90vh;
background: linear-gradient(to bottom, #003850 50%, #ff711b 50%);
background-size: 100% 200%;
background-position: 0 100%;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-position: 0 0 }
}
<div class="page-dark"></div>
Another option is to set the color you want to hide as the background, animation background-position to show the 2nd background (which we create using linear-gradient()):
.page-dark {
height: 90vh;
background: #ff711b linear-gradient(to bottom, #003850 0, #003850 100%) no-repeat;
background-size: 100% 0;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-size: 100% 100%; }
}
<div class="page-dark"></div>