Jentsch
IT-Services
Ligusterweg 10 · 42489 Wülfrath
T.02058.913469 · F.02058.913468

Menü

Neuigkeiten für Ihre Webseite
mit CSS Animationen

wie z. B. mit dieser hier
mehr erfahren

CSS Transitionen

Zum Thema "CSS Transitionen, Syntax, Erklärung etc. gibt es etliche und kompetente Seiten im Netz. Ich zeige nur ein paar Beispiele und deren CSS Code. Die jeweilige Transition wird durch das "mit der Maus darüber fahren" (hovern) ausgelöst.

	.social {
		width: 300px;
		margin: 0 0 0 40px;
		padding: 0;
		overflow: hidden;
	 }
	
	.social a {
	 position: relative;
	 float: left;
	 width: 48px;
	 height: 48px;
	 margin: 0 -10px 0 0;
	 border-radius: 5px;
	 list-style: none;
	 text-decoration: none;
	 padding: 5px;
	 -webkit-transition: all 0.5s ease-in-out;
	 -moz-transition: all 0.5s ease-in-out;
	 -o-transition: all 0.5s ease-in-out;
	 -ms-transition: all 0.5s ease-in-out;
	 transition: all 0.5s ease-in-out;
	 }
	
	.social:hover a {
	 margin: 0 10px 0 0; 
	 }
	
	.social a .image {
	 position: absolute;
	 width: 48px;
	 height: 48px;
	 -webkit-transition: all 0.5s ease-in-out;
	 -moz-transition: all 0.5s ease-in-out;
	 -o-transition: all 0.5s ease-in-out;
	 -ms-transition: all 0.5s ease-in-out;
	 transition: all 0.5s ease-in-out;
	 }
	
	.social a:hover .image {
	 -webkit-transform: rotate(360deg);
	 -moz-transform: rotate(360deg);
	 -o-transform: rotate(360deg);
	 -ms-transform: rotate(360deg);
	 transform: rotate(360deg);
	 }
	
	.social:hover > a {
	 opacity: 0.3;
	 }
	
	.social:hover > a:hover {
	 opacity: 1;
	 }
	
	.social a.facebook {
	 background: #1e5799;
	 }
	
	.social a.twitter {
	 background: #7db9e8;
	 }
	
	.social a.youtube {
	 background: #a90329;
	 }
	
	.social a.rss_feed {
	 background: #ff670f;
	 }
	.social a.xing { background: #00605E; }
	
	.social a.facebook .image { background: url(../../test/bilder/social/fb.png) no-repeat center; }
	
	.social a.twitter .image { background: url(../../test/bilder/social/tw.png) center no-repeat;
	 }
	
	.social a.youtube .image { background: url(../../test/bilder/social/yt.png) center no-repeat;
	 }
	
	.social a.rss_feed .image { background: url(../../test/bilder/social/rss_feed.png) center no-repeat;
	 } 
	.social a.xing .image { background: url(../../test/bilder/social/xi.png) center no-repeat;
	 } 
Beispiel 1
	#bsp1 {
	   border: 1px solid #333;                
	   padding: 20px;
	   background-color: green;
	   font-size: 20px;
	   color: white;
	 
	   -moz-transition: font-size 3s, background-color 1s, color 1s;
	   -webkit-transition: font-size 3s, background-color 1s, color 1s;
	   -o-transition: font-size 3s, background-color 1s ,color 1s;
	   -ms-transition: font-size 3s, background-color 1s, color 1s;
	   transition: font-size 3s, background-color 1s, color 1s;
	}
	#bsp1:hover {
	   font-size: 50px;
	   background-color: yellow;
	   color: black;
	}			
Beispiel 2
	#bsp2 {
	   border: 1px solid #333;                
	   padding: 50px;
	   background-color: blue;
	   font-size: 20px;
	   color: white;
	 
	   transition: background-color 1s;
	}
	#bsp2:hover {
	   background-color: red;
	}   
	
Beispiel 3
	#bsp3 {
	   border: 1px solid #333;                
	   padding: 20px;
	   width: 280px;
	   background-color: lime;
	   color: black;
	 
	   -moz-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
	   -webkit-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
	   -o-transition: background-color 2s 2s, color 2s 1s, width 4s;
	   -ms-transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
	   transition: background-color 2s 2s, color 2s 1s, width 4s steps(5,start);
	}
	#bsp3:hover {
	   background-color: blue;
	   color: #fff;
	   width: 140px;
	 
	}
	

Mehr Annimationen gibt es hier