Animationen mit CSS

Veröffentlicht am:

Mit CSS lassen sich wunderschöne Webseiten gestalten und herrlich verschönern. Hier geht es um Animationen, einfach und nur mit CSS.

Als CSS (Cascading Style Sheets) noch in den Kinderschuhen steckte, wurde der Webdesigner von der starren Website- Gestaltung erlöst und bekam die Möglichkeit an die Hand, mit nur einer einzigen CSS- Datei das Aussehen der gesamten Website zu ändern. Wie komfortabel und einfach.

Bis heute hat sich CSS zu einem festen Bestandteil der Webgestaltung entwickelt. Der neueste Trend, mit CSS3 kamen sehr gute Funktionen mit, mit dabei Animationen nur rein mit CSS.

Nachfolgend noch zwei gute Weblinks.
Hover Animationen mit CSS

Hover Effekte mit CSS ist in der heutigen Zeit doch nichts besonderes! Grundsätzlich nicht! Aber seht euch doch bitte die schönen Beispiele an.

Eine Sammlung von CSS3-basierten Hover-Effekten auf github zum downloaden.
Animate CSS

Auch hier findet ihr ein sehr nützliches und schönes Fundstück. Nochmal auf github

CSS Animation mit Transition

Schöne CSS Animation mit Transition, einfach erstellt und doch sehr effektiv. Kann auch einen Button sehr verschönern und aufpeppen.

langsam → schnell
langsam → langsam

Hier der Code, entdeckt auf selfhtml.org

<code>#div1, #div2 {  
width: 10em;    
height: 3em;  
margin: 1em;  
max-width: 80vw;  
overflow: hidden;  
line-height: 3em;  
text-align: center;  
background-color: gold;  
}  
#div1:hover, #div2:hover {  
background-color: red;  
width: 20em;  
}  
#div1 {}  
#div1:hover {  
transition: all ease 2.5s;  
}  
#div2 {  
transition: all ease 2.5s;  
}  
#div2:hover {}  
main#div3 {  
transition: all ease 2.5s;  
}</code>

Der Code kommt in die style.css Datei, oder was immer ihr nutzt.

In den Content kommt 

<code>id="div1">langsam → schnell
id="div2">langsam → langsam  </code>

Danach sollte es eigentlich schön funktionieren.

Verwandte Beiträge