@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes crescer {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
}

@keyframes ringBell {
    0% {
        transform: rotate(0deg);
        background-image: url(./svg/dw-bell.svg);
    }
    25% {
        transform: rotate(-30deg);
        background-image: url(./svg/dw-bell-right.svg);
    }
    50% {
        transform: rotate(0deg);
        background-image: url(./svg/dw-bell.svg);
    }
    75% {
        transform: rotate(30deg);
        background-image: url(./svg/dw-bell-left.svg);
    }
    100% {
        transform: rotate(0deg);
        background-image: url(./svg/dw-bell.svg);
    }
}

@keyframes bounce {
    0%, 57% {
        transform: translate(-50%, 120%);
    }
    75% {
        transform: translate(-50%, calc(120% + 55px));
    }
    100% {
        transform: translate(-50%, 120%);
    }
}