shultka's picture
Apple MacOS like animation of basic 2d figures
c81ee58 verified
Raw
History Blame Contribute Delete
722 Bytes
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.shape {
position: absolute;
transition: all 0.5s ease-out;
will-change: transform;
cursor: pointer;
}
.circle {
border-radius: 50%;
}
.square {
border-radius: 8px;
}
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.animation-canvas {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
}