CSS 효과 모음

원 튕기듯한 느낌

 

<style>
    .circle {
        display: block;
        width: 38px;
        height: 38px;
        margin: auto;
        border-radius: 50%;
        background-color: #a4ece1;
    }
    .circle:hover {
        animation: jello-vertical 0.8s both;
    }
    @keyframes jello-vertical {
        0% {
            transform: scale3d(0.9, 0.9, 1);
        }
        30% {
            transform: scale3d(0.85, 1.21, 1);
        }
        40% {
            transform: scale3d(1.15, 0.85, 1);
        }
        50% {
            transform: scale3d(0.92, 1.08, 1);
        }
        65% {
            transform: scale3d(1.03, 0.95, 1);
        }
        75% {
            transform: scale3d(0.95, 1.03, 1);
        }
        100% {
            transform: scale3d(1, 1, 1);
        }
    }
</style>
<div class="circle"></div>