How to use Staggered Animation technique to draw attention to the call-to-action button?
What I wish to achieve is to animate the background image, as well as animate the four different elements in the header hero section one after another.
To show them all together is easy: create a custom class that has animation effects. However, to show them one by one in a row needs a bit work, but it by no means is hard at all.
Let's check out the code of animation.html and animation.css (which is created thru animation.scss file, so here posted is the scss file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Use CSS for Animation</title>
<link rel="stylesheet" href="styles/animation.css">
</head>
<body>
<header>
<div>
<img src="img/port5.jpg" alt="" class="pop-in-animation delay-1">
<h2 class="pop-in-animation delay-2">Welcome to my animation world!</h2>
<sub class="pop-in-animation delay-3">A great eye catching technique</sub>
<a href="#" class="pop-in-animation delay-4">Click to see</a>
</div>
</header>
</body>
</html>
So, after examing the file, you can see I've added some custom classes for styling.
The 'pop-in-animation' class is applied to all four elements, except that for each element I also added a separate delay class for different delay durations.
Now let's check out the scss file.
header {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: whitesmoke;
min-height: 100vh;
overflow: hidden;
div {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
h2 {
color: #aeb1c2;
font-size: 4rem;
padding:0;
margin:0;
}
sub {
color: #9a9dac;
font-size: 1.5rem;
}
img {
border-radius: 25px;
width:200px;
height:50px;
image-rendering: pixelated;
}
a {
background-color: greenyellow;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
box-shadow: 1px 2px green;
margin-top: 10px;
}
}
}
// add background image
header::before {
animation: 3s 0.7s cubic-bezier(0,.81,0,.87) forwards fade-slide-down ;
// multiple background starting from front layer
background: linear-gradient(to bottom, rgba(0, 0, 0, 0),rgba(0,0,0,.8)),
url(../img/hero.png) no-repeat bottom;
background-size: contain;
opacity: 0;
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left:0;
z-index: -1;
}
.pop-in-animation {
opacity: 0; // remove the initial visibility
animation: 3s cubic-bezier(0,1.03,.19,1.49) with-scale forwards; // use 'forwards' to keep all visible after animation
}
.delay-1 {
animation-delay: 1s;
}
.delay-2 {
animation-delay: 1.4s;
}
.delay-3 {
animation-delay: 1.8s;
}
.delay-4{
animation-delay: 2s;
}
@keyframes fade-slide-down {
0% {
opacity: 0;
transform: translateY(-4rem) ;
}
100%{
opacity: 1;
transform: none;
}
}
@keyframes with-scale{
0% {
opacity: 0;
transform: translateY(-4rem) scale(.7); // add scale to show the enlarging movement
}
100%{
opacity: 1;
transform: none;
}
}
Here is the show, you can use the full screen button for a better view.
