Change background-image with CSS animation - html

How can I make this class change its background-image after 2 seconds of the div being in viewport? It's not changing for me:
.cover-gradient {
background-image: none;
}
.cover-gradient:after {
opacity: 1;
transition: 0.3s;
animation: fadeMe 2s linear;
}
#keyframes fadeMe {
0% {
background-image: none;
}
100% {
background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
}
}
Thanks.

When animating in CSS, you need to animate between two similar values.
For example, this will work:
max-height: 0px;
and
max-height: 100px;
and this will not:
max-height: none; and max-height: 100px;
However, for performance reasons, it's advisable to use opacity and transform properties when animating in CSS
.cover-gradient {
height: 100vh;
width: 100vw;
opacity: 0;
animation: fadeMe 0.3s linear;
animation-delay: 2s;
animation-fill-mode: forwards;
background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
}
#keyframes fadeMe {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
https://jsfiddle.net/hellogareth/j3ytzq52/22

Related

CSS Marquee With Fade In/Out Effect

I am trying to make a CSS marquee whose text fades in from the right edge and fades out on the left edge. Only the letters on the edges should turn transparent. I'd call it an "opacity mask" that is feathered onto the left/right edges.
I can find CSS marquee code samples but none with such a fade in/out effect. I'd also like the background to be completely transparent, with just the text having the edge effects.
I've tried adding a gradient to the container but, in hind sight, that doesn't seem to be the right path. Below is the code I've come up with thus far. Please assist, thanks!
#Bernard Borg: I've updated my code with the second new sample. Other than this not using opacity - and therefore being A) dependent on being hardcoded to the underlying background color and B) only working on a solid background - this is acceptable for my use case. Thanks! (Any idea how to cover the marquee with opacity rather than a color?)
div#container {
width: 60%;
height: 100%;
position: absolute;
background-color: #e6e9eb;
}
div#marquee-container {
overflow: hidden;
}
p#marquee {
animation: scroll-left 10s linear infinite;
}
#keyframes scroll-left {
0% {transform: translateX( 140%)}
100% {transform: translateX(-140%)}
}
div#marquee-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to right, rgba(230, 233, 235, 1) 0%, rgba(230, 233, 235, 0) 15%, rgba(230, 233, 235, 0) 85%, rgba(230, 233, 235, 1) 100%);
}
<div id="container">
<div id="marquee-container">
<p id="marquee">The quick brown fox jumps over the lazy dog</p>
<div id="marquee-cover"/> <!--thanks Bernard Borg-->
</div>
</div>
For anyone coming to this question in the future - the answer to this question was a joint effort. Find the answer in the question.
This is the closest I was able to get to your updated question;
body {
margin: 0;
}
#container {
width: 100%;
height: 100vh;
background-color: grey;
display: flex;
align-items: center;
}
#marquee-container {
overflow: hidden;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
p#marquee {
font-family: 'Segoe UI', sans-serif;
font-size: 30px;
font-weight: bold;
height: 80%;
animation: scroll-left 5s linear infinite;
white-space: nowrap;
}
#first-cover,
#second-cover {
height: 100vw;
backdrop-filter: opacity(50%);
width: 30vw;
z-index: 100;
}
#first-cover {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2));
}
#second-cover {
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2));
}
#keyframes scroll-left {
0% {
transform: translateX(130%);
}
100% {
transform: translateX(-130%);
}
}
<div id="container">
<div id="marquee-container">
<div id="first-cover"></div>
<p id="marquee">The quick brown fox jumps over the lazy dog</p>
<div id="second-cover"></div>
</div>
</div>
For some reason backdrop-filter (specifically with opacity) isn't doing anything. Weird.
Edit:
You could probably define an image for the background of the marquee (with gradients on each side) and then use mix-blend-mode in some way to fade the text. Perhaps I'm overcomplicating this. ¯\(ツ)/¯
Animate the opacity property (cleaned up the code for better readability);
body {
margin: 0;
}
div#marquee-container {
width: 600px;
height: 150px;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
}
p#marquee {
text-align: right;
animation: scroll-left 10s linear infinite;
}
#keyframes scroll-left {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateX(-80%);
opacity: 0;
}
}
<div style="background-color: black; width: 100%; height: 100%;">
<div id="marquee-container">
<p id="marquee">Testing</p>
</div>
</div>
Side note: You don't need vendor prefixes for animation anymore.
div#container {
width: 100%;
height: 100%;
position: absolute;
background-color: grey;
}
div#marquee-container {
width: 600px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%);
}
p#marquee {
width: 80%;
height: 80%;
--opacity: 0;
moz-animation: scroll-left 1s linear infinite;
-webkit-animation: scroll-left 1s linear infinite;
animation: scroll-left 10s linear infinite;
}
#-moz-keyframes scroll-left {
0% {-moz-transform: translateX( 100%);}
100% {-moz-transform: translateX(-100%);}
}
#-webkit-keyframes scroll-left {
0% {-webkit-transform: translateX( 100%)}
100% {-webkit-transform: translateX(-100%)}
}
#keyframes scroll-left {
0% {-moz-transform: translateX( 100%); -webkit-transform: translateX( 100%); transform: translateX( 100%); opacity: 0;}
30%{
opacity: 1;
}
60%{
opacity: 0;
}
100% {-moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%);opacity: 0; }
}
}
<div id="container">
<div id="marquee-container">
<p id="marquee">Testing</p>
</div>
</div>

How do I make this animation smoother in CSS?

I'm a novice to web development, and I'd like to make a circle rotate the orientation of its linear gradient smoothly, but there is a jump in between each orientation.
I expected it to be smooth, since I used steps and set the animation-timing-function to linear, but there is a jump in between each step of the animation.
I'm not quite sure how to display the code here, if anyone has any tips for a beginner I would appreciate it.
Edit: Here is the code :)
/* The animation: */
#keyframes gradientShift {
0% {background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));}
25% {background-image: linear-gradient(rgb(0, 4, 255), rgb(0, 162, 255));}
50% {background-image: linear-gradient(to right, rgb(0, 162, 255), rgb(0, 4, 255));}
75% {background-image: linear-gradient(rgb(0, 162, 255), rgb(0, 4, 255));}
100% {background: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));}
}
/* The other styles*/
.circle-wrapper {
background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));
animation: gradientShift;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
margin-top: 28vh;
width: 12vh;
height: 12vh;
margin-left: 35vh;
border-radius: 100px;
position: absolute;
padding: 3px;
z-index: 1000;
}
<div class="circle-wrapper">
<div class="circle-module"> </div>
</div>
That is because CSS cannot handle transitions in background images. Basically your CSS animation is "stepped" and will have 5 distinct frames with no interpolation in between.
Seeing that you are only rotating the angle of the gradient and not performing and color changes, you can simply set the linear-gradient on a pseudo-element and rotate it instead:
/* The animation: */
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* The other styles*/
.circle-wrapper {
margin-top: 28vh;
width: 12vh;
height: 12vh;
margin-left: 35vh;
border-radius: 100px;
position: absolute;
padding: 3px;
z-index: 1000;
overflow: hidden;
}
.circle-wrapper::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));
animation: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
content: '';
}
.circle-wrapper>* {
position: relative;
}
<div class="circle-wrapper">
<div class="circle-module"> </div>
</div>
There is no way in css to animate the background-image property.
You see the CSS Animated Properties to know what are the animatable css properties.
But it still possible with javascript, you can use setInterval() with a very small amount of time to change your rotation degree:
let circle = document.getElementsByClassName("circle-wrapper")[0]
let rotateDeg = 0
setInterval(function() {
circle.style.backgroundImage = "linear-gradient(" + ++rotateDeg + "deg, rgb(0, 4, 255), rgb(0, 162, 255))"
}, 2000/360)
.circle-wrapper {
background-image: linear-gradient(to right, rgb(0, 4, 255), rgb(0, 162, 255));
margin-top: 28vh;
width: 12vh;
height: 12vh;
margin-left: 35vh;
border-radius: 100px;
position: absolute;
padding: 3px;
z-index: 1000;
}
<div class="circle-wrapper">
<div class="circle-module"> </div>
</div>

Animating background color for div not working

I have the following CSS:
.saving-overlay {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
z-index: 999;
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition: background-color 10s linear;
-ms-transition: background-color 10s linear;
transition: background-color 10s linear;
}
I want to animate the opacity from 0.0 to 0.8 and this is how I have seen it done on the web. It doesn't seem to be working though. Am I missing something?
What you have got going currently is nearly there. You need to create an animation and add in some keyframes:
animation: mymove 10s linear;
#keyframes mymove {
from {background-color: rgba(0, 0, 0, 0);}
to {background-color: rgba(0, 0, 0, 0.8);}
}
You should use animation css property instead of transition property. Please find the sample code below:
.saving-overlay {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
z-index: 999;
background-color: rgba(0, 0, 0);
animation: animate 1s infinite;
}
#keyframes animate {
from {
background-color: rgba(0, 0, 0, 0);
}
to {
background-color: rgba(0, 0, 0, 0.8);
}
}
Find the sample test link: https://jsbin.com/xetuboj/edit?html,css,output
Note: you can use infinite or linear based on your requirement.

CSS Animated Dots Not Showing Up

I'm currently developing a website for a group, and I'm trying to animate some dots in the word "Loading..." so they blink. I've got the animation working, but for some reason the dots aren't showing up unless I highlight the text with my cursor.
#keyframes blink {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.text span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
.text {
width: 300px;
height: 70px;
font-size: 30px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
The "Loading" part of the text is showing up fine though. Any ideas?
Thanks
You need a color to fall back on for the transparency.
As it stands now, it's already transparent, so the opacity does nothing. If you have a color to go to (not just transparent), it'll show that the relevant percentage, mixed with the gradient. I've done that in the example below using black as the "background".
#keyframes blink {
/* changes the values here */
0% {
-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
}
20% {
-webkit-text-fill-color: rgba(0, 0, 0, 1);
}
100% {
-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
}
}
.text span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
.text {
width: 300px;
height: 70px;
font-size: 30px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>

Understanding how a candle flame is created in a simple SVG

I was just looking at a simple SVG cake animation HERE , the CSS code looks like so:
#import url(http://fonts.googleapis.com/css?family=Lato:300italic);
html,
body {
width: 100%;
height: 100%;
}
body {
background: #ee9ca7;
}
#cake {
display: block;
position: relative;
margin: -10em auto 0 auto;
}
*/* ============================================== Candle
*/
.velas {
background: #ffffff;
border-radius: 10px;
position: absolute;
top: 228px;
left: 50%;
margin-left: -2.4px;
margin-top: -8.33333333px;
width: 5px;
height: 35px;
transform: translateY(-300px);
backface-visibility: hidden;
animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 2.22222222px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
border-radius: 100%;
position: absolute;
top: -20px;
left: 50%;
margin-left: -2.6px;
width: 6.66666667px;
height: 18px;
}
.fuego:nth-child(1) {
animation: fuego 2s 6.5s infinite;
}
.fuego:nth-child(2) {
animation: fuego 1.5s 6.5s infinite;
}
.fuego:nth-child(3) {
animation: fuego 1s 6.5s infinite;
}
.fuego:nth-child(4) {
animation: fuego 0.5s 6.5s infinite;
}
.fuego:nth-child(5) {
animation: fuego 0.2s 6.5s infinite;
}
/* ============================================== Animation Fire
*/
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
transform: translateY(-20px) scale(0);
}
}
#keyframes in {
to {
transform: translateY(0);
}
}
.text {
color: #8b6a60;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-style:italic;
text-align: center;
h1 {
font-size: 1.4em;
}
}
After inspecting the code a bit i came to know the candle flame was caused by this set of HTML elements:
<div class="velas">
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
<div class="fuego"></div>
</div>
And this HTML has the following CSS code:
background: #ffffff;
border-radius: 10px;
position: absolute;
top: 228px;
left: 50%;
margin-left: -2.4px;
margin-top: -8.33333333px;
width: 5px;
height: 35px;
transform: translateY(-300px);
backface-visibility: hidden;
animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
background: rgba(255, 0, 0, 0.4);
content: "";
position: absolute;
width: 100%;
height: 2.22222222px;
}
.velas:after {
top: 25%;
left: 0;
}
.velas:before {
top: 45%;
left: 0;
}
/* ============================================== Fire
*/
.fuego {
border-radius: 100%;
position: absolute;
top: -20px;
left: 50%;
margin-left: -2.6px;
width: 6.66666667px;
height: 18px;
}
.fuego:nth-child(1) {
animation: fuego 2s 6.5s infinite;
}
.fuego:nth-child(2) {
animation: fuego 1.5s 6.5s infinite;
}
.fuego:nth-child(3) {
animation: fuego 1s 6.5s infinite;
}
.fuego:nth-child(4) {
animation: fuego 0.5s 6.5s infinite;
}
.fuego:nth-child(5) {
animation: fuego 0.2s 6.5s infinite;
}
/* ============================================== Animation Fire
*/
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
transform: translateY(-20px) scale(0);
}
}
#keyframes in {
to {
transform: translateY(0);
}
}
Now i don't see the CSS code that is actually cauing the red and yellow flame , i beleive the white shadow is caused by the very high box shadow given in the animations , but somehow i don't see where the candle flame is created , can somebody guide me as to where the candle flame is really created ?
The colors are set by RGB values. There's a yellow, red, and some pink.
#keyframes fuego {
0%, 100% {
background: rgba(254, 248, 97, 0.5); /* yellow */
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2); /* pink */
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1); /* red */
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2); /* pink again */
transform: translateY(-20px) scale(0);
}
}
Timings to change the colors are set in .fuego:nth-child(1) through .fuego:nth-child(6)