mouse over Logo – animated effect

Hello,

I would like to have to have an animated effect on my logo on my site http://www.caratiola.com
I used this code from this post “https://kriesi.at/support/topic/logo-hover-effect-with-my-own-image/“:

.logo:hover a:after {
content: “”;
background-image: url(http://www.urban-house.de/caratiola/wp-content/uploads/sites/5/2018/02/caratiola-logo-large-smile.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
transition:none;

}
.logo:hover img {
opacity: 0;
}
.logo img {
height: 100%;
transition:none;
}

It works mostly fine but on chrome and safari there is a flickering the first time you hover the mouse on the logo. After that it works as intended.
Do you have any ideas what triggers the flickering on the first mouse over?

Thank you