<!DOCTYPE html>
<html>
<head>
<title>css slider animation</title>
<style type="text/css">
body{
background-color: rgb(27,31,34,0.85);
}
h1{
font-size: 2.1rem;
line-height: 1.4;
letter-spacing: 0.5rem;
text-align: center;
color: #fff;
margin-top: 50px;

}
.maindiv{
width: 70%;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-image: url('bg.jpg');
background-size: 100% 100%;
box-shadow: 1px 2px 10px 5px white;
animation: slider 15s infinite linear;
}
@keyframes slider{
0%{background-image: url('bg.jpg');}

35%{background-image: url('bg2.jpg');}

75%{background-image: url('bg3.jpg');}

}
</style>
</head>
<body>
<h1>CSS SLIDER ANIMATION</h1>
<div class="maindiv">

</div>
</body>
</html>