9.1 Hover Effects
Animations play a big role in enhancing user experience (UX) on websites. They can guide user attention, provide feedback, enhance navigation, and make interfaces more intuitive and enjoyable to use. Let's take a look at some examples of using animations to improve UX.
Example: Button Hover Animation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Animation</title>
<style>
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
background-color: #2980b9;
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="button">Hover me</button>
</body>
</html>
Code Explanation:
.button: defines styles for the button, including smooth transitions for background and scale changes on hover.button:hover: when hovering, the button's background color changes and it slightly enlarges
9.2 Loading Animations
Loading animations show users that a process is happening, helping to reduce the perception of waiting.
Example: Loading Spinner
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
<style>
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
Code Explanation:
.spinner: defines styles for the spinner, including borders and spin animation@keyframes spin: defines the spin animation for the spinner from 0 to 360 degrees
9.3 Page Transition Animations
Page or section transition animations help users navigate and create a smoother interaction experience.
Example: Page Transition
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Transition</title>
<style>
.page {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.page.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="page">Content of the page</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.page').classList.add('active');
});
</script>
</body>
</html>
Code Explanation:
.page: sets styles for the page, including initial opacity and downward offset.page.active: when the active class is added, the page becomes fully visible and moves into position- JavaScript: on page load, the
activeclass is added to the.pageelement, triggering the animation
9.4 Click Animations
Click animations can enhance user feedback and make interactions more fun.
Example: Button Click Animation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Click Animation</title>
<style>
.button {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
cursor: pointer;
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<button class="button">Click me</button>
</body>
</html>
Code Explanation:
.button: defines styles for the button, including smooth transition for the scale.button:active: when the button is clicked, it slightly reduces in size creating a clicking effect
GO TO FULL VERSION