Graphic Design Web Design SEO Web Development HTML & CSS JavaScript WordPress Eleventy Innovation Portfolio My YouTube Channel Speedlify Presenting Multi Grid Navigation Sounds Affordable & Reliable Golden Ratio Optimizations X-height

CSS Animation Techniques

By: on Apr 20, 2022

Getting just the right amount of animation can be done with small tweaks to CSS transitions and animations. Here are some examples of how to do this.

<div class="shapes-container">
<div class="shapes-col">
<div class="shapesOne shape-1"></div>
<div class="shapesTwo shape-2"></div>
</div>
</div>
.shapes-col {
display: grid;
grid-template-columns: 50px;
grid-template-rows: 360px;
justify-content: center;
}
.shape-1 {
width: 300px;
height: 300px;
background-color: blue;
z-index: 1;
animation-duration: 1s;
animation-name: fadeInOne;
animation-timing-function: ease;
}
.shape-2 {
position: relative;
top: 60px;
grid-column: 2;
width: 300px;
height: 300px;
background-color: green;
z-index: 2;
animation-duration: 1.2s;
animation-name: fadeInTwo;
animation-timing-function: ease;
}
@media (max-width: 45em) {
.shapes-col {
justify-content: center;
}
}
@keyframes fadeInOne {
0% {
opacity: 0;
transform: translateY(25%);
}
70% {
transform: translateY(-4px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes fadeInTwo {
0% {
opacity: 0;
transform: translateY(15%);
}
70% {
transform: translateY(-2px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}