Transition und Keyframes

[Andrin.Spitzer]

Hayo.

Ich beschäftige mich gerade mit Transition und keyframes.

Auf meiner Website Firmenmeisterschaft-sh habe ich gerade eine kleine Animation in arbeit. aussehen sollte das am ende etwa so:

die Maus geht auf das logo dieses dreht sich und der text bereich wächst etwas und der text erscheint. Diesen Teil habe ich bereits geschafft.


Wen die Maus nun wider sich entfernt sollte sich der text erst einklappen und dann zurück drehen. Diesen Teil noch nicht

Ich dachte mir vlt. wäre es mit delay möglich wie beim aktiviren des hovers aber hald rückwärts.

und villeicht hatt jemand noch ne idee wie ich es schaffe das sich die anderen in dem wrapper befindenden divs sich nicht dan neu ausrichten (zusehen auf der website)

Hier mein fiddle. weiß jetzt auch nicht so genau wieso aber auf meiner Website ist das smoother.

 

[Andrin.Spitzer]

Hab mir überlegt was überlegt hier in diesem fiddle zusehen. ich habe einfach beim "ausgeführten zustand also :hover" noch eine transition eingefügt mit dem Gedanken das diese wirkt wen der mauszeiger iwo anders ist.

in dem fiddle funktioniert des gut nur auf der website nicht

 

[basti1012]

Im Fiddle ist es einfach da du da nur eine Box hast.
Bei dir auf der Seite hast du ja noch die Flip-box mit ihren Container
Meinst du das so ungefähr ?

Link zur Lösung

 

[Andrin.Spitzer]

Perfekt.

Ist :not:hover dan die auszuführende animation die nach dem :hover "verlassen" geschieht?

 

[Andrin.Spitzer]

Habe jetzt alles mal eingebaut, Funktion 1a aber dafür gibt es nun wider 2 Probleme.

1. die ul bzw li sind bei kleinem bildschirm nicht mehr wie vorhin schön zentriert.

2. ich habe so wider einen eckligen rand (wen du am am handy auf der website bist kanst du rüber scrollen.

 

[basti1012]

kuck mal gerade

Link zur Lösung



Die größen der li Container mußt du wohl noch etwas auf deinen wünschen anpassen.

 

[Andrin.Spitzer]

Iwie stimmt bei mir dann gar nix mehr

 

[basti1012]

probier doch mal aus das du hier

.pop-up-menu {
    margin: 0 auto;
    padding: 0.5em;
    width: 60em;
    color: white;
}

das width:60em raus nimmst.
Dann sollten es bei kleineren Bildschirmen es wieder besser aussehen

 

[Andrin.Spitzer]

probier doch mal aus das du hier

.pop-up-menu {
    margin: 0 auto;
    padding: 0.5em;
    width: 60em;
    color: white;
}

das width:60em raus nimmst.
Dann sollten es bei kleineren Bildschirmen es wieder besser aussehen

Das hab ich gemacht aller dings hat es ja noch nen 2ten wrapper und der spinnt komplett

 

[basti1012]

Irgendwie haben wir wohl immer verschiedene Ergebnisse.

Mach doch nochmal alles rückgängig wie es mittwoch morgen wahr.
Dann kopieren wir nur die änderungen da rein die es brauch damit es so aussieht wie gewollt ist.
Was ist den mit den Codepen

Link zur Lösung



funktioniert da alles wie es soll ?