CSS animations ✨
✅ Introduction:
CSS animation is one of the most powerful features in modern web-design. It helps you create smooth movements, transitions, and interactive effects without using JavaScript.
With CSS animation, you can make a website look more attractive and engaging for users.
⭐What You Will Learn in This Article :
- What CSS animation is
- How the @keyframes rule works
- How to apply animation to HTML elements.
- Common properties of animation
- Examples of CSS animation
🌟 What are CSS animation
CSS animation allow you to change an element's style smoothly overtime.
For example:-
- Moving a box from left or right
- Fading text in or out
- Increasing the size of a button on hover
- Color changing buttons
- Background-transitions
✨Why CSS animation matter
Here's why they matter
✔️ Makes the website look modern
✔️ Improves user engagement
✔️ No JavaScript required
✔️ Light weight
✔️ Clean animation improve engagement. Which inderctly helps SEO
⭐How CSS animation works
CSS animation work using two main things
1. @keyframes :-
This defines how the animation will change.
2. Animation properties :-
These control speed, duration, delay, and repetition.
🔗Basic Structure of a CSS animation:
Here is the Simple example:-
<html>
<head>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background: deeppink;
animation: move 7s infinite;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Here output is:
This moves a box from left to right endlessly.
Skip to content
✨ Important of CSS Animation properties
- animation-name:- The name of the keyframes
- animation-durartion:- How long the animation runs
- animation-delay:- When the animation starts
- animation-iteration-count:- Numbers of repeat (1,2,infinite)
- animation-direction:- normal, reverse, alternate
- animation-timing-function:- linear, ease, ease-in, ease-in-out, etc.
🌟1. Fade-In Animation (Most Popular Effect)
Perfect for text, images, banners, and buttons.
<html>
<head>
<style type="text/css">
.fade
{
text-align:center;
animation:fadeIn 7s;
animation-iteration-count: infinite;
}
@keyframes fadeIn{
from{opacity: 0 ;
background: orange;
color:black}
to{opacity: 1;
background:green;
color: deeppink}
}
</style>
<title></title>
</head>
<body>
<h2 class="fade">Css animation </h2>
</body>
</html>
Used this effect when you want to Fade-In text.
Here is output:
🌟2. CSS Text Animation effect
<html >
<head>
<style>
.typing-text {
font-size: 28px;
font-weight: 600;
color:darkcyan;
width: 0;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid grey;
animation: typing 5s steps(30) forwards, cursorBlink 0.3s infinite;
animation-iteration-count: infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 340px; }
}
@keyframes cursorBlink {
50% { border-color: transparent; }
}
body {
font-family: Arial, sans-serif;
padding: 10px;
background: lightpink;
}
</style>
</head>
<body>
<h1 class="typing-text">This is CSS Text Animation!</h1>
<h1 class="typing-text">This is CSS Text Animation!</h1>
</body>
</html>
This gives a typing effect
Here output is:
⭐Where to use CSS Animation in web-design
- Web headers
- Buttons
- Banners
- Navigation menu
- Cards on hover
🎉Conclusion
CSS animations are one of the easiest ways to make your website look modern and professional, with just a few lines of CSS, you can create smooth transitions, hover effects, and much more.
Comments
Post a Comment