Schöne CSS Animation mit Transition

Schöne Animation nur mit CSS, einfach erstellt. Zum Beispiel ein Button, der aus der Reihe tanzt und die Webseite etwas mehr aufpeppt.

CSS Animation mit Transition

Die CSS Anweisung

Der folgende Code gehört in die CSS Datei, oft die style.css, oder was auch immer ihr nutzt.

	#div1, #div2, #div3, #div4 {  
	width: 10em;    
	height: 3em;  
	margin: 1em;  
	max-width: 80vw;  
	overflow: hidden;  
	line-height: 3em;  
	text-align: center;  
	background-color: gold;  
	}  
	#div1:hover, #div2:hover, #div3:hover, #div4: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;  
	}   

Im Content ausgegeben wird die tolle CSS Animation wie folgt.

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

Ich hoffe, ich konnte euch etwas behilflich sein. Übrigens, der Code stammt von selfhtml.org