I'm currently facing a challenge with making my animation resize automatically based on screen size, just like my background image does. The width of the animation seems to be inconsistent or doesn't stretch across the entire screen as I intended.
body {
height: 100%;
margin: 0;
padding: 0;
background:url(../img/Ex.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 3rem;
outline-style: solid;
outline-color: #ffcd11;
outline-width: thick;
background-color: #ffcd11;
}
.rain {
height: 100%;
margin: 0;
padding: 0;
background:url(../img/snowfall2.png) center center
fixed,url(../img/snowfall3.png) center center fixed;
animation: rain 1s linear infinite;
}
.rain:before {
content: '';
position: absolute;
height: 100%;
background: white;
animation: lighting 4s linear infinite;
opacity: 0;
}
@keyframes lighting {
0%
{
opacity: 0;
}
10%
{
opacity: 0; position: 0% 0%;
}
11%
{
opacity: 1; position: 20% 100%;
}
14%
{
opacity: 0;
}
20%
{
opacity: 0;
}
21%
{
opacity: 1;
}
24%
{
opacity: 0;
}
104%
{
opacity: 0;
}
}
@keyframes rain {
0%
{
background-position: 0% 0%;
}
100%
{
background-position: 20% 100%;
}
} <div class="carousel-caption rain">
<!-- <h1>Machine Parts Intelligence</h1> -->
<h1 class="lead">THE NEW MACHINE MODEL INFORMATION EXPERIENCE</h1>
</div>I have implemented keyframes for the animation. Although I'm still working on perfecting the lighting effect, my main focus now is to ensure that the rain/snowfall effect matches the width of the background image effortlessly.