We Keep Coding

CSS animation, just changes images with no animation

I am trying to change photos with a fade like animation but they just switch between themselves,
any idea how to fix it or what I am doing wrong? thank you in advance.
CSS:
.slider{
width: 300px;
height: 400px;
background: url("images/flip1.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide 20s ease-in-out;
}
#keyframes slide{
25%{
background: url("images/flip2.png");
background-size: 300px 300px;
background-repeat: no-repeat;
}
50%{
background: url("images/flip3.png");
background-size: 300px 300px;
background-repeat: no-repeat;
}
75%{
background: url("images/flip4.png");
background-size: 300px 300px;
background-repeat: no-repeat;
}
100%{
background: url("images/flip1.png");
background-size: 300px 300px;
background-repeat: no-repeat;
}
}
html:

I think it could help you.
.slide-container {
position: relative;
}
.slide1 {
width: 300px;
height: 400px;
background: red url("images/flip1.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide1 20s ease-in-out;
position: relative;
}
.slide2 {
width: 300px;
height: 400px;
background: blue url("images/flip2.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide2 20s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide3 {
width: 300px;
height: 400px;
background: green url("images/flip3.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide3 20s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide4 {
width: 300px;
height: 400px;
background: yellow url("images/flip4.png");
background-repeat: no-repeat;
background-size: 300px 300px;
animation: slide4 20s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#keyframes slide1 {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
25% {
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes slide2 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes slide3 {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
70% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes slide4 {
0% {
opacity: 0;
}
70% {
opacity: 0;
}
75% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="slide-container">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
<div class="slide4"></div>
</div>

Use prefixes for other browsers
-webkit-animation: 4s linear 0s infinite alternate move_eye;
-moz-animation: 4s linear 0s infinite alternate move_eye;
-o-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
https://developer.mozilla.org/ru/docs/Web/CSS/animation

Background animation looping smoothly

I am trying to add a background animation that will move from right to left and will loop cleanly. So far the animation works from right to left using keyframes but after 30s it stops and starts all over again. It doesn’t look very clean and smooth. Is there any alternative solution for this?
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("/media/background.svg");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 30s;
animation-iteration-count: infinite;
}
#keyframes slide {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}

Change the 50% keyframe to be the 100% keyframe, and set the end background position to -100vw.
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}
And the same idea with animation-timing-function: linear:
body:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
background-image: url("https://picsum.photos/1200/1200");
background-position: 0px;
background-repeat: repeat-x;
background-size: cover;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw 0;
}
}

How should I go about animating a background gradient according to a value?

So I am creating a widget for streamlabs, currently I am trying to figure out how to animate the css "background: linear-gradient(#cf8888 -5%, #df4747 100%);" according to the % of the height from this div. The javascript already controls the height of the div according to the "goals" current.
Any suggestions where I should start to animate this BG?
IE example:
<div class="goal-start"></div>
#goal-start{
position: absolute;
background: linear-gradient(#cf8888 -5%, #df4747 100%);
width: 100%;
bottom: 0;
left: 0;
z-index: -1;

CSS
.goal-start{
width:100%;
height:100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
background-size: 400% 400%;
-webkit-animation: gradientBG 10s ease infinite;
animation: gradientBG 10s ease infinite;
}
#-webkit-keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
HTML code:
<div class="goal-start"></div>

How can I create fullscreen crossfading slideshow on background without white flicker?

I'm creating a crossfade fullscreen slideshow on my webpage with HTML and CSS, however it's not working well.
I could create crossfading on background images, but there is a problem.
In first loading, there are white flickers between each images.
I don't want to avoid white flickers.
How can I fix them?
I've wrote with HTML and CSS to create a crossfade slideshow.
<body>
<div class="slideshow">
</div>
</body>
body {
margin: 0;
padding: 0;
}
.slideshow {
height: 100vh;
weight: 100%;
background-image: url('../images/1.jpg');
background-size: cover;
animation: slide 24s infinite;
}
#keyframes slide {
25% {
background-image: url('../images/2.jpg');
background-size: cover;
}
50% {
background-image: url('../images/3.jpg');
background-size: cover;
}
75% {
background-image: url('../images/4.jpg');
background-size: cover;
}
}
I don't need white flickers and apply a beautiful crossfade slideshow.

Flickers happen because the browser paints a new image, probably.
Try creating individual <div>s for each slide, position them absolute, and simply fade each of them away.
<body>
<div class="slideshow">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
<div class="slide slide-4"></div>
</div>
</body>
.slideshow {
position: relative;
width: 100vw; height: 100vh;
}
.slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
opacity: 0;
transition: opacity 1s;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
With CSS only:
#keyframes slide-1 {
0% , 40% , 100% { opacity: 0; }
20% { opacity: 1; }
}
#keyframes slide-2 {
0% , 20% , 60% , 100% { opacity: 0; }
40% { opacity: 1; }
}
#keyframes slide-3 {
0% , 40% , 80% , 100% { opacity: 0; }
60% { opacity: 1; }
}
#keyframes slide-4 {
0% , 60% , 100% { opacity: 0; }
80% { opacity: 1; }
}
.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }
Or with JS:
setInterval(function(){
var current = document.querySelector('.slide.active');
if (current.nextElementSibling) {
current.nextElementSibling.classList.add('active');
} else {
current.parentElement.firstElementChild.classList.add('active');
};
current.classList.remove('active');
}, 6000);

Changing a css linear gradient animation without freezing the animation

I have an linear gradient animation for my website and I would like themes, so I am trying to use javascript to change the color's in the css,
I got it to do something but it freezes the animation when I do so.
function changeBackground() {
document.body.style.background = "linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)";
}
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%
}
}
<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.

Change only the background-image not the whole background. Changing the background will override the background-size and will freeze the animation. Better define background-image in the CSS also to avoid other issues.
You can also get rid of the prefix versions and simplify the animation like below:
function changeBackground() {
document.body.style.backgroundImage = "linear-gradient(-45deg, blue,red)";
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
#keyframes Gradient {
0%,100% {
background-position: left
}
50% {
background-position: right
}
}
<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.
You can check this answer to understand the simplification and to have more details in case you need different animations: https://stackoverflow.com/a/51734530/8620333

First, since your "a" tag acting as buttons and not as anchors you should use the button element.
Secondly, make a class with the desired background colors and fire it with the onclick event.
(by the way body width should be on vw and not as you wrote it)
function changeBackground() {
document.body.classList.add('changeBackground');
}
body {
width: 100vw;
height: 90vh;
color: #fff;
background-image: 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%
}
}
.changeBackground {
background-image: linear-gradient(-45deg, yellow, blue, red, green);
}
<button onclick="changeBackground()">Default</button>
***Just another approach.
Good Luck!

The Fix
This is because you are overriding the values of your animation. In CSS inline styles have a higher specificity than linked styles, and the background attribute is a shorthand that sets both background-image and background-position. The styles you're applying via JavaScript are setting new values with higher specificty than your animation keyframes. To fix this, set backgroundImage rather than background.
function changeBackground() {
document.body.style.backgroundImage = "linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)";
}
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%
}
}
<a onclick="changeBackground()">Default</a>
<a onclick="clickHandler()">Fire</a> // This will be implemented at a later time.
An Improved Approach
Better yet - use CSS classes to apply the change in styles rather than through JavaScript and avoid the specificity battle altogether. This how CSS is intended to be used.
Also worth mentioning a <button> is a more appropriate element to use for behavior, as anchors are for sending the user somewhere.
Though, if you're pulling the linear gradient values programmatically this may not be an option.
function setDefault() {
document.querySelector('body').setAttribute('class', '');
};
function clickHandler() {
document.querySelector('body').classList.add('fire');
};
body {
width: 100wh;
height: 90vh;
color: #fff;
background-image: 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;
}
.fire {
background-image: linear-gradient(-45deg, #ff0000, #efefef, #ff0000, #efefef);
}
#-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%
}
}
<button onclick="setDefault()" tyle="button">Default</buttopn>
<button onclick="clickHandler()" tyle="button">Fire</buttopn>