div.waiting
img.bird(src='https://images.unsplash.com/photo-1517516433317-4de48d8eb15b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Bird.')
View Compiled
* {
padding: 0;
margin: 0;
}
.bird {
display: block;
min-height: 100vh;
width: 100vmax;
object-fit: cover;
object-position: center right;
}
.waiting {
height: 100vh;
width: 100vw;
overflow: hidden;
font-size: 2rem;
position: relative;
&:after {
content: "Waiting.";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255,255,255,.75);
color: Tomato;
animation: waiting 3s steps(3, end) infinite;
}
}
@keyframes waiting {
33% {
content: "Waiting..";
}
66% {
content: "Waiting...";
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.