background image ease-in-out css
Mon May 30 2022 13:11:48 GMT+0000 (Coordinated Universal Time)
Saved by
@oliverholee
#javascript
============html====================
<div class="slide-bg"></div>
=============css==============
.slide-bg{
height: 100vh;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
backface-visibility: hidden;
animation: slidbg 25s ease-in-out infinite ;
background-image: url(../images/banner-1.png);
}
@keyframes slidbg {
0% {
background-image: url(../images/banner-1.png);
}
25% {
background-image: url(../images/banner-2.png);
}
50% {
background-image: url(../images/banner-1.png);
}
75% {
background-image: url(../images/banner-2.png);
}
100% {
background-image: url(../images/banner-1.png);
}
}
content_copyCOPY
Comments