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.
 

Andrin.Spitzer

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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 ?
 

Andrin.Spitzer

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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
 

basti1012

Erfahrenes Mitglied
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
funktioniert da alles wie es soll ?
 

basti1012

Erfahrenes Mitglied
ich verstehe nur noch Bahnhof.
Es sieht doch so aus das alles geht , bis auf das bei kleineren Monitoren Der Scrollbalken unten da ist richtig ?
 

basti1012

Erfahrenes Mitglied
In deiner Css steht ja das
Code:
.wrapper ul {
    margin: 0px auto;
    padding: 1em 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.5em;
}
ändere das mal kurz so und sag mir ob das Ergebniss so aussehen soll
Code:
ul {
    margin: 0px auto;
    padding: 0 !important; 
    list-style: none;
    display: flex;
    width: 100% !important;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 1.5em;
}
 

Andrin.Spitzer

Erfahrenes Mitglied
Hay hier ein paar bilder die mein problem erklären:alt.PNG

so sah es bisher aus also recht gut


neu.PNG

so sieht es nun aus


problem.PNG

und das ist das problem am smartphone weisst du weiss ich meine?
 

basti1012

Erfahrenes Mitglied
einiges.
Du kannst ja mal die alte Css und die jetzige Css durch den Validator Testen.
Habe fast alle Fehler und Warnungen weggemacht und danach halt paar sachen geändert bis es so aussieht wie es jetzt ist.
Ich kann dir also nicht genau sagen welcher Code jetzt Schuld wahr.
 

Andrin.Spitzer

Erfahrenes Mitglied
hmm oke wusste nich das des gibt mit dem Validator.
Ich schaue es mir mal genau an und probiere es dann selbst.
Rein optisch ist es ja etzt nicht mehr das selbe und einige buttons haben auch einen knacks habe ich gesehen. abeer danke dir trozdem.
 

Neue Beiträge