CSS Animation
CSS animations enable you to add dynamic transitions to your web pages without needing to use JavaScript. By defining keyframes and animation properties, you can create complex visual effects that enhance the user experience. Here’s a guide to creating CSS animations:
1. Keyframes
The @keyframes rule defines the intermediate steps in an animation sequence by specifying styles at various points along the animation timeline.
Basic Syntax
@keyframes animationName {
from {
/* Starting styles */
}
to {
/* Ending styles */
}
}
Example
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
2. Animation Properties
- animation-name: Specifies the name of the @keyframes animation to apply.
- animation-duration: Specifies the duration of the animation (e.g., 2s for 2 seconds).
- animation-timing-function: Specifies the speed curve of the animation (e.g., ease, linear, ease-in, ease-out, ease-in-out).
- animation-delay: Specifies a delay before the animation starts.
- animation-iteration-count: Specifies the number of times the animation should run (e.g., infinite, 1, 2).
- animation-direction: Specifies whether the animation should play in reverse on alternate cycles (e.g., normal, reverse, alternate, alternate-reverse).
- animation-fill-mode: Specifies how a CSS animation should apply styles to its target before and after it is executing (e.g., none, forwards, backwards, both).
- animation-play-state: Specifies whether the animation is running or paused.
- Shorthand Property: You can combine all animation properties into a shorthand property animation.
Syntax
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Example
Keyframes Definition
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Applying the Animation
.element {
animation-name: fadeIn;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
Shorthand Example
.element {
animation: fadeIn 2s ease-in-out 1s infinite alternate forwards;
}
Practical Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS Ball Animation</title>
<style>
.box {
margin: 0;
height: 200px;
width: 600px;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.ball {
width: 50px;
height: 50px;
background-color: #ff5722;
border-radius: 50%;
position: absolute;
animation: bounce 2s infinite ease-in-out;
}
@keyframes bounce {
0%, 100% {
transform: translateX(200px);
}
50% {
transform: translateX(-200px);
}
}
</style>
</head>
<body>
<div class=”box”>
<div class=”ball”></div>
</div>
</body>
</html>
OUTPUT
Animation effect with hover pseudo class
Creating animations with hover effects in CSS allows you to add interactive visual feedback to elements when users interact with them. You can achieve this by using the :hover pseudo-class along with CSS animations. Here are some examples:
Example 1: Simple Color Change on Hover
.button {
background-color: blue;
color: black;
padding: 10px 20px;
text-align: center;
display: inline-block;
transition: background-color 0.3s ease;
text-decoration: none; /* Prevents underline for links */
border-radius: 5px; /* Optional: Rounds the corners */
}
.button:hover {
background-color: green;
}
OUTPUT
Example 2: Scaling Effect on Hover
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.25);
}
OUTPUT
Example 3: Rotate on Hover
.icon {
width: 100px;
height: 100px;
background-color: orange;
transition: transform 0.5s ease;
}
.icon:hover {
transform: rotate(135deg);
}
OUTPUT
Example 4: Hover Animation with Keyframes
@keyframes fadeIn {
from {
opacity: 0.3;
}
to {
opacity: 1;
}
}
.element {
opacity: 0.3;
width: 100px;
height: 100px;
background-color: blue;
transition: opacity 0.5s ease;
}
.element:hover {
animation: fadeIn 0.5s forwards;
}
OUTPUT
Example 5: Hover with Multiple Animations
@keyframes moveAndFade {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-50px);
opacity: 0.1;
}
}
.card {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.card:hover {
animation: moveAndFade 0.5s forwards;
}
OUTPUT
Example 6: Background Color and Text Color Change on Hover
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
transition: background-color 0.3s ease, color 0.3s ease;
text-decoration: none; /* Removes underline */
border-radius: 5px; /* Adds rounded corners */
}
.button:hover {
background-color: #2ecc71;
color: black;
}
Example 7: Text Animation on Hover
@keyframes textGlow {
0% {
text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}
100% {
text-shadow: 0 0 40px rgba(255, 0, 0, 1);
}
}
.text {
font-size: 24px;
color: #f00;
transition: color 0.3s ease;
}
.text1:hover {
animation: textGlow 1s infinite alternate;
color: #ff0; /* Changes color to yellow on hover */
}
OUTPUT