[flip logo] #css #html #animation

index.html

 <div class="logos">
   <div class="front"><img src="img/spec-rus.svg" alt="УКС «Спецпартнер»" class="logo"></div>
   <div class="back"><img src="img/spec-eng.svg" alt="UKS «Specpartner»" class="logo"></div>
</div> 

style.css

.header__top .logos {
    position: relative;
    perspective: 1000px;
    width: 234px;
    height: 150px;
    
}
.header__top .front,
.header__top .back {
    position: absolute;
    transition: 1s;
    backface-visibility: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: animateLogo 4s infinite;
            animation: animateLogo 4s infinite;
            animation-direction:alternate;

}
.header__top .back {
    transform: rotateY(180deg);
    animation-name: animateLogoB;
}

@keyframes animateLogo {
    0% {
        transform: rotateY(0deg)
    }
    40% {
        transform: rotateY(0deg)
    }
    60% {
        transform: rotateY(180deg)
    }
    100% {
        transform: rotateY(180deg)
    }
}
@keyframes animateLogoB {
    0% {
        transform: rotateY(180deg)
    }
    40% {
        transform: rotateY(180deg)
    }
    60% {
        transform: rotateY(360deg)
    }
    100% {
        transform: rotateY(360deg)
    }
}