Transition und Keyframes

Andrin.Spitzer

Erfahrenes Mitglied
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.
 
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
 
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
 
Zuletzt bearbeitet:
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.
 
probier doch mal aus das du hier
Code:
.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
 
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 ?
 
Zuletzt bearbeitet:
Zurück