# Transition und Keyframes



## Andrin.Spitzer (3. Juni 2020)

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 (3. Juni 2020)

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 (4. Juni 2020)

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 (4. Juni 2020)

Perfekt. 

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


----------



## Andrin.Spitzer (4. Juni 2020)

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 (4. Juni 2020)

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 (4. Juni 2020)

Iwie stimmt bei mir dann gar nix mehr


----------



## basti1012 (5. Juni 2020)

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 (5. Juni 2020)

basti1012 hat gesagt.:


> probier doch mal aus  das du hier
> 
> ```
> .pop-up-menu {
> ...



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


----------



## basti1012 (5. Juni 2020)

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 ?


----------



## Andrin.Spitzer (7. Juni 2020)

hab jetzt mal alles so gemacht wie es seien sollte.  soll ich dir meine dateien zu verfügun stellen?


----------



## basti1012 (7. Juni 2020)

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 (7. Juni 2020)

In deiner Css steht ja  das

```
.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

```
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 (8. Juni 2020)

Hay hier ein paar bilder die mein problem erklären:
	

		
			
		

		
	




so sah es bisher aus also recht gut





so sieht es nun aus





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


----------



## basti1012 (9. Juni 2020)

kuck mal jetzt
**** Link entfernt weil es den Link nicht mehr gibt****


----------



## Andrin.Spitzer (9. Juni 2020)

was hast du da angepasst?


----------



## basti1012 (9. Juni 2020)

Wieso ? 
Ist immer noch falsch ?


----------



## Andrin.Spitzer (9. Juni 2020)

basti1012 hat gesagt.:


> Wieso ?
> Ist immer noch falsch ?



Ne sieht besser aus will einfach wissen wo mein fehler war haha


----------



## basti1012 (9. Juni 2020)

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 (11. Juni 2020)

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.


----------



## Andrin.Spitzer (16. Juni 2020)

Hay. Ich möchte mich kurz bedanken jetzt funktioniert es sehr gut. 

Leider verhalten sich die Buttons komisch sie springen herum und der hover effeckt mit der border transition funktioniert erst wen ich vom Button gehe.


----------



## basti1012 (16. Juni 2020)

Meinst du die Buttons Spielplan  und reglement ?
Das Springen ist eigentlich kein springen.
Durch den hover wird ein Border gesetzt der vor hover nicht da ist.
Dadurch werden beide Buttons um 2px größer und breiter.
Das sieht dann so aus das alles springt.

Gib den Buttons vorher einen unsichtbaren Border dann ist das weg

```
.button {
    margin: 0.5em 0em;
    width: 90%;
    max-width: 15em;
    color: white !important;
    background-color: black;
    text-align: center;
    border: 1px solid transparent;/*  das dazu schreiben */
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
```
Was für ein Effekt haben die Border den gemacht ?
Zur Zeit zeigen die bei mir keinen Effekt, nicht beim hovern und auch nicht wenn ich da runter gehe


----------



## Andrin.Spitzer (16. Juni 2020)

basti1012 hat gesagt.:


> Meinst du die Buttons Spielplan  und reglement ?
> Das Springen ist eigentlich kein springen.
> Durch den hover wird ein Border gesetzt der vor hover nicht da ist.
> Dadurch werden beide Buttons um 2px größer und breiter.
> ...


Ja denn auch aber mehrheitlich die class="link-title"


----------



## Andrin.Spitzer (17. Juni 2020)

Oder funktionieren die bwi dir?


----------



## basti1012 (18. Juni 2020)

versuche es mal so

```
.link-title {
    border: 1px solid transparent;
    transition: border 1s;
}

.link-title:hover {
    border: 1px solid white;
}
```

bzw das transition beim hover rein machen.
Weiß nicht genau wie es vorher wahr


----------

