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

#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;  
}

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

In den Content kommt

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

Danach sollte es eigentlich schön funktionieren.

Anzeige
Stark reduzierte Produkte bei Amazon.
Will ich sehen
Leistungen
Website Änderungen
Website Wartung
Websites mit CMS
Website Verwaltung
WordPress Websites
Website Analyse
Technishes SEO
WordPress Erfahrung seit 2006
Kontakt
info@seot.de