Certainly! HTML and CSS provide powerful tools for creating animation effects on web pages. Below are examples of some common animation effects using keyframes and transitions. Feel free to customize these examples to suit your specific design needs.
### 1. **Keyframes Animation: Bouncing Ball**
**HTML:**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Bouncing Ball Animation</title>
</head>
<body>
<div class="ball"></div>
</body>
</html>
**CSS (styles.css):**
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.ball {
width: 50px;
height: 50px;
background-color: #3498db;
border-radius: 50%;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
### 2. **Transitions: Hover Effect**
**HTML:**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Hover Effect</title>
</head>
<body>
<button class="hover-btn">Hover Me</button>
</body>
</html>
**CSS (styles.css):**
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.hover-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #27ae60;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.hover-btn:hover {
background-color: #2ecc71;
}
These are just basic examples, and you can expand on them to create more complex animations and effects. CSS animations and transitions are powerful tools that, when used thoughtfully, can greatly enhance the user experience on your website.