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;