Modern CSS Animations in Effect
Used well, CSS animation is an incredibly useful and powerful tool. It can add interest or creative excitement, direct the user’s eye, explain something quickly and succinctly, and improve usability. For that reason, recent years have seen more and more animation on sites and in app.
In this article, we round up some of the coolest CSS animation examples we’ve seen, and show you how to recreate them. Read on for a range of in-depth tutorials and inspiring effects (and links to their code) to explore.
What is CSS Animations ?
CSS animation is a method of animating certain HTML elements without having to use processor and memory-hungry JavaScript or Flash. There’s no limit to the number or frequency of CSS properties that can be changed.
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what style the element will have at certain times. Keyframes will be discussed further in this blog.
What is need of modern CSS Animations ?
Every one of us gets awestruck when we look at the exquisitely designed websites of tech biggies, like Apple or Microsoft, or of automobile companies like Tesla or Mercedes.
The X-factor that makes these websites stands out, is oftentimes the appealing animations and effects that make us look again and again.
So, how do they make the websites so amazingly interactive? Ever gaped about how the animations on these websites actually work?
Do you wish to design a similarly elegant and interactive website for your business too? If yes, then look no further.
Read along as this is an extensive excerpt covering the basics of modern CSS animations and transitions that could immensely help you in achieving the same for your business website.
If you have just ventured into the domain of front-end development, or are looking to expand your understanding about the same, then continue reading this blog, because by the end of it you’ll get a comprehensive understanding of CSS.
Let’s deep dive in Modern CSS Animations !
1. Keyframes :
The @keyframes in CSS controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.
Keyframes in action :
Code snippet for Main-Heading: OUTDOORS — Moving towards right.
@keyframes move-to-right {
0% {
transform: translateX(-10rem);
opacity: 0;
} 10% {
opacity: 0.8;
} 80% {
transform: translateX(2rem);
} 100% {
transform: translate(0);
opacity: 1;
}
}
Code snippet for Primary-Heading: IS WHERE LIFE HAPPENS — Moving towards left.
@keyframes move-to-left {
0% {
transform: translateX(10rem);
opacity: 0;
} 10% {
opacity: 0.8;
} 80% {
transform: translateX(-2rem);
} 100% {
transform: translate(0);
opacity: 1;
}
}
Code snippet for Button: DISCOVER OUR TOURS — Moving to the top.
@keyframes move-to-top {
0% {
transform: translateY(6rem);
opacity: 0;
} 100% {
transform: translate(0);
opacity: 1;
}
}
2. Fading Button Hover :
Sometimes pseudo classes in CSS are very helpful to add functionality, without manipulating the HTML. So here I have used ::after psuedo class to give modern look to the button when hovered.
Button — hover in action :
Code snippet for Fading Button Hover :
.header--btn:link,
.header--btn:visited {
font-size: 1.6rem;
letter-spacing: 0.02rem;
margin-top: 6rem;
padding: 2rem 4rem;
position: relative;
transition: all 0.3s;
animation: move-to-top 0.4s ease-out 0.5s backwards;
}.header--btn:hover {
transform: translateY(-0.8rem);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}.header--btn:active {
transition: all 0s !important;
transform: translateY(-0.4rem);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}.header--btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: #fff;
transition: all 0.3s;
}.header--btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
3. Text Gradient :
Coders and website builders use gradient text all the time, in fact, gradients are one of the latest crazes in website design for a few reasons:
They’re easy to implement and they have a wonderful visual effect (especially if you have an image-light website). Whether muted text gradients or bright and highly colorful, knowing how to create a gradient pattern with your text is a useful tool for your website.
Text Gradient in action :
Code snippet for Text Gradient :
.heading--animation {
text-transform: uppercase;
font-weight: 700;
font-size: 3.6rem;
letter-spacing: 0.16rem;
display: inline-block;
background-image: linear-gradient(to right, rgba(126, 213, 111), rgba(40, 180, 133));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
transition: all 0.3s;
}4. Outline -Offset and Hover Effect :
The outline-offset property adds space between the outline and the edge or border of an element. The space between an element and its outline is transparent. Outlines differ from borders in three ways:
- An outline is a line drawn around elements, outside the border edge
- An outline does not take up space
- An outline may be non-rectangular
Outline-Offset and hover in action :
Code snippet for Outline-Offset and hover :
.about__img {
box-shadow: 0 1.4rem 2.4rem rgba(0, 0, 0, 0.3);
position: absolute;
width: 52%;
transition: all 0.3s;
outline-offset: 2rem;
}.about__img:hover {
box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.4);
transform: scale(1.05) translateX(-1rem) translateY(1rem);
z-index: 1;
outline: 1.2rem solid #55c57a;
border-radius: 1px;
cursor: auto;
}
5. Highligting Text using Background -Image :
The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Background-image and Background-size in action :
Code snippet for highlighting animation :
.nav_list li {
margin: 1rem 0;
}.nav_list a:link,
.nav_list a:visited {
transition: all 0.52s ease;
text-transform: uppercase;
text-decoration: none;
color: #fff;
font-weight: 300;
font-size: 2.8rem;
display: inline-block;
padding: 1.2rem 2.4rem;
letter-spacing: 1px;
background-image: linear-gradient(132deg, transparent 0%, transparent 50%, #fff 50%);
background-size: 240%;
}.nav_list a:hover {
color: #28b485;
background-position: 100%;
transform: translateX(1.2rem);
}
6. Transform :
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Transform in action :
Code snippet for transform :
.footer__nav-list a:link,
.footer__nav-list a:visited {
text-decoration: none;
letter-spacing: 0.5px;
color: #ededed;
display: inline-block;
transition: all 0.24s;
}.footer__nav-list a:hover {
color: #55c57a;
transform: scale(1.2) rotate(2.8deg);
box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 1);
}
Wrapping Up :
It could be a bit complicated to get used to CSS jargons at first. But once you get used you’ll realize that Modern CSS Animations are simply marvelous.
Thanks for reading. I hope this article helped you. If it did, please give it a thumbs-up.
Happy Coding.
