Tranzisione CSS3 - scalare logo

[intaccabile]

Salve, sono alla prese con un sticky menu e il cliente mi chiede di ridimensionare il logo come in questo link: http://www.latrotteuse.fr/en/

ho fatto delle prove ma non riesco ad arrivarci

inserisco il codice base da dove sono partito

/*navbar*/

.site-header.sticky .nav-wrap {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}

.site-header.sticky .nav-wrap.sticky {
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}

/*logo*/
a#sticky-logo img{
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}

.nav-wrap .site-logo a img {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}

a#sticky-logo img{
opacity: 0;
}

.nav-wrap.sticky .site-logo a img {
opacity: 0;
}

.nav-wrap.sticky a#sticky-logo img {
opacity: 1;
}


@keyframes anpsopacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


grazie per l'aiuto in anticipo.

[fcaldera]

il codice che hai postato non sembra che faccia alcun ridimensionamento
posta un link con il codice minimale che non funziona