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