#container {
    display: flex;
    width: 300px;
    height: 50px;
    margin: 0 auto;

}

#star {
    font-size: 50px;
    flex: 1;
    text-align: center;
    line-height: 50px;
    margin: 10px auto;
    cursor: pointer;
    border-radius: 100%;
    transition: 1s;
}

.inactive {
    color: lightgrey
}

@keyframes myAnim {
    0% {
        animation-timing-function: ease-out;
        transform: scale(1);
        transform-origin: center center;
    }

    10% {
        animation-timing-function: ease-in;
        transform: scale(0.91);
    }

    17% {
        animation-timing-function: ease-out;
        transform: scale(0.98);
    }

    33% {
        animation-timing-function: ease-in;
        transform: scale(0.87);
    }

    45% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
}

.animated {
    animation: myAnim 2s ease 0s infinite normal forwards;
    color: gold
}

.active {
    color: gold;
}