This clip of loading a landing page has 3 parts of animations:
1. The sliding down background image
2. The sliding down chevron button near the left edge.
3. After clicking the button, three lines of elements will glide across the screen from the right edge in staggered animation motion.
For the first two animation effects, I use 'animation' property. Animation property has @keyframes for fine-tuning the different animation stages, although for this example I only used two frames.
For the last animation, there are title, subtitle and call-to-action button to glide across the screen, I use 'transition' property, because from state A to state B, the change is triggered by clicking the chevron button.
A few things need to be mentioned in this tiny project:
When clicking the chevron button, the state B of transition property will be triggered by the condition of ':checked' pseudo-class, the input checkbox is hidden, the checked state can be detected by the accompanying label. The chevron button image is wrap inside the label element. There may be another way to accomplish the same result. To remove the label, and to add the image as the 'content' to input::after pseudo class.
In order to assign the transition-delay property with different values, so that the title, subtitle and the button can show up in intervals, I use the inline variables such as ' style="--var:1" '.
Transition has four sub-properties, they can be defined in this shorthand format:
div {
transition: <property> <duration> <timing-function> <delay>;
}
As for this landing page, I define the first three sub-properties inside the same class '.slide-in-animation' that I give to all the three elements, this is an easy way to unify their movements by using the same custom class. Only the transition-delay is left out to be calculated once the ':checked' condition is met and the transition movement from state A to state B can be displayed.
Now let's check out the file of animation.html
<!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>
<input type="checkbox" id="menu" name="menu">
<label for="menu">
<img src="img/chevron-pointing-right-round-button.png" alt="">
</label>
<h2 class="slide-in-animation" style="--var:1">Welcome to my animation world!</h2>
<sub class="slide-in-animation" style="--var:2">A great eye catching technique</sub>
<div class="slide-in-animation" style="--var:3"><a href="#" >Click to see</a></div>
</div>
</header>
</body>
</html>
Also the animation.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;
input{
display:none;
}
img {
position: absolute;
left:30px;
opacity:0;
animation: .3s 2s cubic-bezier(0,.81,0,.87) forwards fade-slide-down; // animate the chevron button
}
h2 {
color: #aeb1c2;
font-size: 4rem;
padding:0;
margin:0;
}
sub {
color: #9a9dac;
font-size: 1.5rem;
}
div {
display: inline-block; // this div is added for making the a tag hugged by itself
margin-top: 20px;
a {
background-color: greenyellow;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
box-shadow: 1px 2px green;
}
}
}
}
// 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;
}
.slide-in-animation {
opacity: 0; // remove the initial visibility
transform: translateX(100%);
// define how to do the animation
transition-property: opacity, transform;
transition-duration: .3s;
transition-timing-function: cubic-bezier(0.750,-0.015,0.565,1.055);
}
// condition set by checkbox ":checked" psuedo class
input[type=checkbox] + labe img {
display: block;
}
input[type=checkbox]:checked + label img {
display: none;
}
input[type=checkbox]:checked ~ .slide-in-animation {
opacity:1;
transform: translateX(0);
transition-delay: calc(0.15s * var(--var));
}
@keyframes fade-slide-down {
0% {
opacity: 0;
transform: translateY(-4rem) ;
}
100%{
opacity: 1;
transform: none;
}
}
