zwei Transitions gleichzeitig

[Sprint]

Hallo zusammen,

bei einem neuen Projekt soll das Firmenlogo am oberen Rand teilweise so versteckt sein, daß nur der Firmenname konstant sichtbar ist und bei Mouseover dann nach unten rutscht, so daß das Logo selbst sichtbar wird. Das funktioniert an sich wunderbar.

.movelogo {
    width: 230px;
    background-color: #313131;
    text-align: center;
    font-size: 14px;
    float: left;
    -webkit-transition: background-color 4s ease, width 1s ease, height 2s ease;
    -moz-transition: background-color 4s ease, width 1s ease, height 2s ease;
    -o-transition: background-color 4s ease, width 1s ease, height 2s ease;
    transition: background-color 4s ease, width 1s ease, height 2s ease;             }
#movelogo {
    position: relative;
    -moz-transition-property: top;
    -o-transition-property: top;
    -webkit-transition-property: top;
    transition-property: top;
    top: -101px;
}
#movelogo:focus,
#movelogo:hover {
    top: 1px;
    padding-bottom: 30px;
    background-color: #313131;
}

Jetzt ist aus Platzgründen der Firmenname recht nah an der unteren Kante. Um dem kompletten Logo mehr Raum zu geben, soll zusammen mit dem runterrutschen am unteren Rand etwas mehr Platz entstehen (padding-bottom bei hover). Auch das funktioniert, aber nur im Safari wirklich so wie geplant, daß nämlich mit der Bewegung des Logos der untere Rand kontinuierlich breiter wird. Alle anderen Browser, egal ob Mac oder Win, kleben den zusätzlichen Streifen bei Mouseover dran und entfernen ihn bei Mouseout wieder. Sieht natürlich doof aus.

Ich hatte auch mal probiert, die Hintergrundfarbe während der Animation einblenden zu lassen, aber auch das bringt nur der Safari richtig hin.

Gibt es eine Möglichkeit, bei allen Browsern eine kontinuierliche Bewegung zu bekommen?

Danke schon mal,
Sprint

 

[Jan-Frederik Stieler]

HI,
kannst Du mal eine laufendes Beispiel irgendwo hochladen?
Das Analysieren von Browserverhalten macht keinen Spaß nur mit reinem CSS .

 

[Sprint]

Hi,
jetzt ja , denn wir haben heute die neue Seite veröffentlicht. Zwar noch nicht vollständig, mußte aber aus organisatorischen Gründen sein. https://herpolsheimer.ag/index_neu.php

Mitte oben soll weich rausfahren und verlängern.