CSS-Übergang Breite der div-box zu erweitern, um die Links wenn die Maus schwebt über ihm

Ich habe ein Interessantes problem, das ich zu lösen versuche. Ich habe diese Spenden-Schaltfläche, die erstellt wird, mithilfe der folgenden css.

#donate-button {
    width: 211px;
    position: absolute;
    background: #FFBC2F;
    color: #FFF;
    left: 1140px;
    right:1340px;
    z-index: 30;
    top: 0px;
    transition:width 2s;
    transition:left 2s;
    transition:bottom 2s;
}

Und css-übergang Effekt, den ich will, ist, dass der Spenden-button ist orange hintergrund zu erweitern. Es wird erweitert, Links, Richtung Links unten, während die oberen und rechten frame der Schaltfläche intakt bleibt in der Ecke des Browsers.

Ich versucht, die Anwendung der folgenden css-übergang hover-Eigenschaft, etwa so:

#donate-button:hover {
    width:33%;
    left:73%;
    bottom: 53%;
}

Den Spenden-button nur ist die Größe auf dem unteren Rahmen, aber nicht der linke frame und seine Breite. Aber ich bin zu Ahnen, ich wusste nicht, wie die transition-delay-und Dauer-Kombination, so konnte ich nicht wirklich ganz die richtige Wirkung...

Kann jemand mich in die richtige Richtung, wie ich erreichen kann, diese Art von Wirkung/animation? Irgendwelche Ideen?

Lassen Sie mich wissen, wenn Sie weitere Informationen benötigen.

InformationsquelleAutor awongCM | 2013-11-13

css-transitions html

2
```
transition:width 2s;
transition:left 2s;
transition:bottom 2s;
```
Sind Sie überschreiben die transition Eigenschaft hier zwei mal, so dass nur der Letzte Wert schließlich "überlebt".

Musst du alle drei Werte, die Sie animieren wollen, in eine transition Eigenschaft,
```
transition:width 2s, left 2s, bottom 2s;
```
- Okay. Das hilft. Der linke frame und Weitenverstellung werden wiederbelebt. Aber jetzt, dass der Boden wird erweitert sofort, ohne jeden übergang, animation), die erst vor zwei animiert wurden. Also ich muss etwas getan haben, sonst läuft hier falsch. Wie mein hover funktionieren sollte ist, dass ich will das für left und width-frame animiert, den ersten, dann den unteren frame animiert, zuletzt in glatten schrittweise animation. Was muss ich tun?
- Mit übergängen können Sie nur starten, alles, was geschieht, gleichzeitig. Wenn Sie möchten, dass mehrere Dinge geschehen nacheinander, dann haben Sie den Einsatz von CSS-Animationen.
- Okay. Danke. Ich denke ich werde die Forschung, die richtigen CSS-Animationen Optionen, die ich brauche, um diesen Effekt.. es sei denn, Sie haben irgendwelche gute Empfehlungen, die ich nehmen könnte, einen Blick auf?
InformationsquelleAutor CBroe

Oh, ich fand die Antwort.

Sollte ich tun wie diese.

#donate-button {
    height:80px;
    width: 211px;
    position: absolute;
    background: #FFBC2F;
    color: #FFF;
    left: 1140px;
    right:1340px;
    z-index: 30;
    top: 0px;
    transition:height 2s ease-in, width 2s ease-out, left 2s ease-out, bottom 2s ease-in;
}

#donate-button:hover {
    height:30%;
    width:53%;
    left:77%;
    bottom: 23%;
}

Ich vergaß hinzuzufügen, der height-Eigenschaft. Deshalb wurde die Höhe erweitert zu schnell, wenn die Maus, also keine animation möglich war.

InformationsquelleAutor awongCM

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.