<div class="demos">
<div class="demo"> </div>
</div>
:root {
--bounce-easing: linear(
0, 0.063, 0.25 18.2%, 1 36.4%, 0.813, 0.75, 0.813, 1, 0.938, 1, 1
);
}
.demo{
animation-timing-function: var(--bounce-easing);
position: fixed;
left: 50%;
top: 5%;
animation-name: bigger;
animation-duration: 3s;
animation-iteration-count: infinite;
transform-origin: left top;
width: 30px;
height: 30px;
border-radius: 50%;
/* border-radius: 50%; */
background: blue;
}
@keyframes bigger{
100%{
transform: translateY(200px);
background: #353567;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.