<div id="description">
<h2>Ефект "відскоку"</h2>
<p>Анімація, яка надає ефект відскоку для елемента.</p>
</div>
<div id="result">
<div class="bounce"></div>
</div>
/* Загальні стилі */
body {
background-color: #f1f1f1;
}
#description {
text-align: center;
margin-bottom: 20px;
}
h2 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #333;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #777;
}
#result {
padding-top: 100px;
display: flex;
justify-content: center;
}
/* Анімація "відскоку" */
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-100px);
}
70% {
transform: translateY(-60px);
}
85% {
transform: translateY(-80px);
}
100% {
transform: translateY(0);
}
}
.bounce {
width: 100px;
height: 100px;
background-color: #ff6384;
animation: bounce 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
border-radius: 50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.