Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Animate Bullets in Lists using CSS?
Animated list bullets enhance user interaction and provide visual feedback when users hover over list items. CSS allows us to create smooth transitions and hover effects on both ordered and unordered lists using properties like list-style, box-shadow, and transition.
Syntax
li {
list-style: value;
transition: property duration;
}
li:hover {
/* Animation styles */
}
Method 1: Animate Unordered List
The following example demonstrates how to style and animate unordered list items with smooth hover effects using box-shadow and font-size transitions −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
padding: 20px;
list-style: none;
}
li {
margin: 10px 0;
padding: 15px;
width: 300px;
background-color: #f0f8ff;
border-radius: 25px 5px 5px 25px;
box-shadow: -8px 2px 6px 0 #87ceeb;
color: #4169e1;
font-size: 16px;
transition: all 0.3s ease;
cursor: pointer;
}
li:hover {
box-shadow: -12px 4px 8px 0 #0000ff;
font-size: 20px;
background-color: #e6f3ff;
transform: translateX(10px);
}
</style>
</head>
<body>
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Data Science</li>
<li>Machine Learning</li>
</ul>
</body>
</html>
Four list items with rounded corners and blue shadows appear. When hovered, each item grows larger, shifts right, changes shadow, and smoothly transitions between states.
Method 2: Animate Ordered List with Custom Counters
This example shows how to create animated ordered lists using custom CSS counters and hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: none;
counter-reset: item;
padding: 20px;
}
li {
counter-increment: item;
margin: 15px 0;
padding: 15px 15px 15px 50px;
width: 250px;
background-color: #f5f5f5;
border-left: 5px solid #32cd32;
box-shadow: inset 3px 3px 8px #add8e6;
position: relative;
transition: all 0.4s ease;
font-weight: bold;
}
li::before {
content: counter(item);
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
background-color: #32cd32;
color: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all 0.4s ease;
}
li:hover {
box-shadow: inset 8px 8px 15px #90ee90;
font-size: 18px;
background-color: #f0fff0;
padding-left: 60px;
}
li:hover::before {
background-color: #228b22;
transform: translateY(-50%) scale(1.2);
}
</style>
</head>
<body>
<ol>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>JavaScript Logic</li>
<li>Framework Integration</li>
</ol>
</body>
</html>
An ordered list with custom circular numbered bullets appears. On hover, list items expand, the text grows larger, shadows become more prominent, and the numbered bullets scale up with a darker green background.
Conclusion
CSS list animations enhance user experience by providing visual feedback through smooth transitions. Combining transition, transform, and hover effects creates engaging interactive lists that respond elegantly to user interactions.
804 Views
