Bring mit CSS Code Bewegung in Deine Website! Auch für Webdesign gilt: Qualität über Quantität. Ich zeige Dir, wie Du CSS Animationen gezielt einsetzt.
Mein Pet Peeve (engl. für eine Sache, die Dich persönlich nervt oder stört, auch wenn es anderen vielleicht egal ist) auf Websites sind übertrieben viele Animationen.
Nur weil Du es animieren kannst, musst Du es nicht animieren. Ich hasse es, Websites entlangzuscrollen und alles fliegt irgendwie rein. Die Idee ist, mit Animationen Highlights zu setzen. Aber wenn alles ein Highlight ist, dann ist irgendwie nichts ein Highlight, oder?
Wie Du mit Custom CSS Code Animationen gezielt einsetzen kannst, zum Beispiel, wenn Du mit der Maus über einen bestimmten Bereich fährst, zeige ich Dir in diesem Video.
Dazu habe ich Dir auch alle CSS Snippets unter dem Video verlinkt. Viel Spaß beim gezielten Animieren!
CSS Code zum Kopieren
/**ANIMIERT CONTAINER A**/
.containerA:hover .bild1 {
transform: rotate(-4deg);
transition: transform 0.5s ease;
}
.containerA:hover .bild2 {transform: rotate(8deg);
transition: transform 0.5s ease;
}
.containerA:hover .logoleiste {
transform: translateX(-35%);
transition: transform 0.5s ease;
}
/**ANIMIERT CONTAINER B**/
.containerB:hover .candy1 {
transform: rotate(-4deg);
transition: transform 0.5s ease;
}
.containerB:hover .candy2 {
transform: rotate(8deg);
transition: transform 0.5s ease;
}
/**ANIMIERT CONTAINER C**/
.containerC:hover .eis-bunt {
transform: scale(1.1);
transition: transform 0.5s ease;
}
/**ANIMIERT CONTAINER D**/
.containerD:hover .eis-blau {
transform: translateY(-70%);
transition: transform 0.5s ease;
}
/**ANIMIERT CONTAINER E**/
.containerE:hover .reihe1 {
transform: translateY(5%);
transition: transform 0.5s ease;
}
.containerE:hover .reihe2 {
transform: translateY(-5%) translateX(-5%);
transition: transform 0.5s ease;
}
.containerE:hover .reihe3 {
transform: translateY(5%);
transition: transform 0.5s ease;
}
/**ANIMIERT CONTAINER F**/
.containerE:hover .eis-rot{
transform: translateX(-80%);
transition: transform 0.5s ease;
}Tool-Tipps
*Affiliate-Link. Wenn Du über diesen Link etwas kaufst, kostet es Dich nichts extra, aber ich erhalte eventuell eine kleine Provision, die ich direkt in mein Galão Projekt reinvestiere 😊
Du willst mehr?
Dir gefällt das Bento Grid Layout? Dann schau Dir hier das Tutorial „How to Bento Grid erstellen“ dazu an 😉
