Fließende Übergänge mit transition

Hintergrundfarbe ändern

.box {
background: #333;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

.box:hover {
background: #999;
}

Hintergrundfarbe sowie Weite und Breite mit verschiedenen Timings

.box {
background: #999;
width: 300px;
height: 100px;
-webkit-transition: background-color 4s ease, width 1s ease, height 2s ease;
-moz-transition: background-color 4s ease, width 1s ease, height 2s ease;
-o-transition: background-color 4s ease, width 1s ease, height 2s ease;
transition: background-color 4s ease, width 1s ease, height 2s ease;
}

.box:hover {
background: #333;
width: 400px;
height: 80px;
}

Text wird langsam eingeblendet

olivergast.de

.text {
opacity: 0;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}

.text:hover {
opacity: 1;
}

Text wird scharf

olivergast.de

.text {
color: transparent;
text-shadow: 2px 2px 10px #999;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

.text:hover {
color: #000;
}

Bild vergrößern und ausblenden

.box {
width: 200px;
height: 200px;
background: rgb(167,207,223);
background: -moz-radial-gradient(center, ellipse cover, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 );
-webkit-box-shadow: 3px 3px 5px #666;
-moz-box-shadow: 3px 3px 5px #666;
box-shadow: 3px 3px 5px #666;
overflow: hidden;
}

.box .bild {
width: 200px;
height: 200px;
background: url(wp_logo.png) center no-repeat;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

.box:hover .bild {
opacity: 0;
-webkit-transform: scale(3);
-moz-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}

Ecken-Rundung

.box {
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.box:hover {
-moz-border-radius-topleft: 40px;
-moz-border-radius-bottomright: 40px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
}

Ecken-Rundung mit verschiedenen Timings

.box {
-moz-border-radius: 80px 40px 40px 80px;
border-radius: 80px 40px 40px 80px;
-webkit-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
-moz-transition: -moz-border-radius-topleft 0.2s ease, -moz-border-radius-topright 1s ease,
-moz-border-radius-bottomleft 2s ease, -moz-border-radius-bottomright 3s ease;
-o-transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
transition: border-top-left-radius 0.2s ease, border-top-right-radius 1s ease,
border-bottom-left-radius 2s ease, border-bottom-right-radius 3s ease;
}

.box:hover {
-moz-border-radius: 40px 80px 80px 40px;
border-radius: 40px 80px 80px 40px;
}

Kreis wird zur abgerundeten Box

.box {
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.box:hover {
-moz-border-radius: 20px;
border-radius: 20px;
}

Bild mit wechselnder Sichtbarkeit ("opacity")

.box {
position: relative;
margin: 20px auto;
background: url(bild.jpg) no-repeat;
width: 600px;
height: 400px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 15px 10px -10px #333;
-moz-box-shadow: 0 15px 10px -10px #333;
box-shadow: 0 15px 10px -10px #333;
opacity: .7;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

.box:hover {
opacity: 1;
}

Werbebanner mit wechselndem Text bei :hover

WordPress
Download WordPress 3.1.1 DE-Edition

<span class="box">
<a href="http://wordpress-deutschland.org/download/deutsch">
<img src="bild.png" alt="" />
<h5>WordPress</h5>
<div>Download WordPress 3.1.1 DE-Edition</div>
</a>
</span>

.box a {
background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
text-shadow: 0 1px 0 #000;
-webkit-box-shadow: 1px 1px 5px #555;
-moz-box-shadow: 1px 1px 5px #555;
box-shadow: 1px 1px 5px #555;
display: block;
width:500px;
height: 100px;
margin: 20px auto;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
text-decoration:none;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.box a:hover {
-moz-border-radius: 20px;
border-radius: 20px;
}

.box a img {
float:left;
margin:18px 20px;
}

.box h5 {
float:left;
text-align:left;
color:#ffffff;
width:300px;
margin:25px 0;
font-size:30px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.box a:hover h5 {
margin-top: -140px;
}

.box div {
float:left;
position: relative;
margin: 35px 0;
color: #666;
font-size: 20px;
font-weight:bold;
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.box a:hover div {
opacity: 1;
}

Bild fährt bei :hover in die Box

WordPress

<div class="box">
<img src="bild.jpg" alt="" />
<h5>WordPress</h5>
</div>

.box {
position: relative;
background: #6393c1;
background: -moz-linear-gradient(top, #6393c1 0%, #cfe7fa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6393c1), color-stop(100%,#cfe7fa));
background: -webkit-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: -o-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: -ms-linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
background: linear-gradient(top, #6393c1 0%,#cfe7fa 100%);
width:300px;
height:100px;
margin:20px auto;
padding: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
overflow:hidden;
border: 1px solid #fff;
-moz-box-shadow: 1px 1px 10px #333;
-webkit-box-shadow: 1px 1px 10px #333;
box-shadow: 1px 1px 10px #333;
}

.box img {
position: absolute;
left: 300px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

.box:hover img {
left: 215px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.box h5 {
position: absolute;
top: -5px;
left: 60px;
color:#ffffff;
font-size:32px;
font-weight:bold;
margin: 30px auto;
text-shadow: 1px 1px 10px #333;
font-family: 'Segoe UI', Verdana, Geneva, Arial, Helvetica, sans-serif;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

.box:hover h5 {
left: 30px;
}

Und noch ein Werbebanner

WordPress

<span class="box">
<a href="http://wordpress-deutschland.org/download/deutsch">
<img src="bild.png" alt="" />
<div>WordPress</div>
</a>
</span>

.box a {
display: block;
overflow: hidden;
text-decoration:none;
width:200px;
height: 300px;
margin: 20px auto;
background: #cfe485;
background:-moz-radial-gradient(center, #cfe485, #6f9b0a); /* FF3.5+ */
background:-webkit-gradient(radial, 50% 50%, 50, 50% 50%, 200, from(#cfe485), to(#6f9b0a)); /* Saf3.1+, Chrome */
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 0 0 5px #222;
-moz-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

.box a img {
margin:86px auto;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

.box div {
margin: 40px auto;
color: #ffffff;
font-size: 30px;
font-weight:bold;
text-shadow:#666 1px 1px 3px;
opacity: 0;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}

.box a:hover div {
opacity: 1;
}

.box a:hover img {
margin-top:-120px;
opacity: 0;
}

Und noch eins...

WordPress

<span class="box">
<a href="http://wordpress-deutschland.org/download/deutsch">
<img src="bild.png" alt="" />
<div>WordPress</div>
</a>
</span>

.box a {
display: block;
width:400px;
height: 200px;
margin: 20px auto;
background: #dbeaf9;
background:-moz-radial-gradient(center, #dbeaf9, #39648c); /* FF3.5+ */
background:-webkit-gradient(radial, 50% 50%, 50, 50% 50%, 200, from(#dbeaf9), to(#39648c)); /* Saf3.1+, Chrome */
overflow: hidden;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
-moz-box-shadow: 0px 15px 10px -10px #111;
-webkit-box-shadow: 0px 15px 10px -10px #111;
box-shadow: 0px 15px 10px -10px #111;
}

.box a img {
margin:-140px auto;
opacity:0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}

.box div {
margin: 70px auto;
color: #000;
font-size: 42px;
font-weight:bold;
text-shadow: 1px 1px 10px #000, 1px 1px 20px #000;
opacity: 1;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

.box a:hover div {
opacity: 0;
}

.box a:hover img {
margin:36px auto;
opacity: 1;
}

Einen hab ich noch...

<div class="box">
<a href="http://de.wordpress.org">
<div class="image"></div>
<div class="title">WordPress</div>
<div class="slogan">Code is Poetry</div>
</a>
</div>

.box {
background: #cedce7;
background: -moz-radial-gradient(center, ellipse cover, #cedce7 0%, #596a72 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#cedce7), color-stop(100%,#596a72));
background: -webkit-radial-gradient(center, ellipse cover, #cedce7 0%,#596a72 100%);
background: -o-radial-gradient(center, ellipse cover, #cedce7 0%,#596a72 100%);
background: -ms-radial-gradient(center, ellipse cover, #cedce7 0%,#596a72 100%);
background: radial-gradient(center, ellipse cover, #cedce7 0%,#596a72 100%);
position: relative;
margin: 20px auto;
width: 400px;
height: 200px;
-webkit-box-shadow: 0 0 5px #666;
-moz-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow:hidden;
}

.box a, .box a:hover {
text-decoration: none;
}

.box .image {
background: url(../images/wp_logo_128.png) center no-repeat;
position: absolute;
width: 400px;
height: 200px;
opacity: 0.3;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
-ms-transition: all 2s linear;
transition: all 2s linear;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
}

.box:hover .image {
-webkit-transform: scale(2) rotate(-10deg);
-moz-transform: scale(2) rotate(-10deg);
-o-transform: scale(2) rotate(-10deg);
-ms-transform: scale(2) rotate(-10deg);
transform: scale(2) rotate(-10deg);
opacity: 0.5;
}

.box .title, .box .slogan {
position: absolute;
width: 400px;
height: 200px;
text-transform: uppercase;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
}

.box .title {
top: 80px;
font-size: 48px;
font-weight: normal;
color: #1E5799;
opacity: 0;
}

.box .slogan {
background: #000;
top: 220px;
font-size: 18px;
color: #fff;
padding: 10px 0;
-webkit-box-shadow: 0 0 5px #333;
-moz-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
}

.box:hover .title {
color: #0A0E33;
opacity: 1;
}

.box:hover .slogan {
color: #fff;
top: 150px;
opacity: 1;
}

Social-Icons im Metro-Look

<div class="social">
<a href="#" class="facebook">
<div class="image"></div>
<span>facebook</span>
</a>
<a href="#" class="twitter">
<div class="image"></div>
<span>twitter</span>
</a>
<a href="#" class="youtube">
<div class="image"></div>
<span>youtube</span>
</a>
<a href="#" class="rss_feed">
<div class="image"></div>
<span>rss</span>
</a>
</div>

.social {
width: 500px;
margin: 20px auto;
padding: 0;
overflow: hidden;
}

.social a {
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 5px 0 0;
list-style: none;
text-decoration: none;
}

.social a .image {
position: absolute;
width: 48px;
height: 48px;
top: 26px;
left: 26px;
-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 {
top: 16px;
}

.social a span {
width: 100px;
position: absolute;
padding: 0;
font-size: 14px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
color: #fff;
left: 0;
bottom: -20px;
-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 span {
bottom: 10px;
}

.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.facebook .image {
background: url(facebook.png) center no-repeat;
}

.social a.twitter .image {
background: url(twitter.png) center no-repeat;
}

.social a.youtube .image {
background: url(youtube.png) center no-repeat;
}

.social a.rss_feed .image {
background: url(rss.png) center no-repeat;
}

Und nochmal Social-Icons

<div class="social">
<a href="#" class="facebook">
<div class="image"></div>
</a>
<a href="#" class="twitter">
<div class="image"></div>
</a>
<a href="#" class="youtube">
<div class="image"></div>
</a>
<a href="#" class="rss_feed">
<div class="image"></div>
</a>
</div>

.social {
width: 300px;
margin: 20px auto;
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.facebook .image {
background: url(facebook.png) center no-repeat;
}

.social a.twitter .image {
background: url(twitter.png) center no-repeat;
}

.social a.youtube .image {
background: url(youtube.png) center no-repeat;
}

.social a.rss_feed .image {
background: url(rss.png) center no-repeat;
}

Transition mit :active

Klick auf die Box

.box {
background: #999;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.box:active {
background: #333;
width: 300px;
height: 300px;
}

Transition mit :focus

Klick in ein Eingabefeld

input {
height: 30px;
width: 200px;
margin: 5px auto 0 0;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

input:focus {
background: yellow;
width: 250px;
}

↑ Seitenanfang