style.css

.square {
    min-width: 30%;
    min-height: 30%;
    margin-right: -1px;
    margin-bottom: -8px;
    border: black solid 1px;
}

.square-1 {
    border-top-left-radius: 10%;
}

.square-3 {
    border-top-right-radius: 10%;
}

.square-7 {
    border-bottom-left-radius: 10%;
}

.square-9 {
    border-bottom-right-radius: 10%;
}

.grid {
    width: 550px;
    height: 550px;
}

.player-1 {
    background-size: contain;
    background-image: url('images/circle.png');
    background-repeat: no-repeat;

    animation-duration: 0.5s;
    animation-name: onClick;
}

.player-2 {
    background-size: 100% 100%;
    background-image: url('images/cross.png');
    background-repeat: no-repeat;

    animation-duration: 0.5s;
    animation-name: onClick;
}

.img-player {
    width: 40px;
}

.win {
    animation-iteration-count: 30;
    animation-duration: 0.5s;
    animation-name: onWin;
}

@keyframes onClick { 
    0% {
        background-position: 50% 50%;
        background-size: 50%;
    }
    25% {
        background-position: 50% 50%;
        background-size: 60%;
    }
    50% {
        background-position: 50% 50%;
        background-size: 75%;
    }
    75% {
        background-position: 50% 50%;
        background-size: 85%;
    }
    100% {
        background-position: 50% 50%;
        background-size: 100%;
    }
}

@keyframes onWin { 
    0% {
        background-position: 50% 50%;
        background-size: 50%;
    }
    25% {
        background-position: 50% 50%;
        background-size: 75%;
    }
    50% {
        background-position: 50% 50%;
        background-size: 100%;
    }
    75% {
        background-position: 50% 50%;
        background-size: 75%;
    }
    100% {
        background-position: 50% 50%;
        background-size: 50%;
    }    
}