logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


CSS3 Transition

Mittels CSS3 Transition kann man die Geschwindigkeit von Animationen via CSS festlegen. Ebenso ist es möglich die Animationen zeitlich via CSS-Eigenschaften zu beinflussen.

Im folgenden Beispiel sehen sie eine Box, die bei Mouseover in einer bestimmten Zeitvorgabe rotiert, vergrößert und die Hintergrudfarbe ändert. Bei Mouse Out, geht die Box wieder in die Ausgangsposition.

 

Mouse Over Me !xy

 

Der CSS3 Beispielcode lautet:


  
  .postBox-transition1 {
    border-style: dashed;
    border-width: 2px;
	border-color:#000;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #fff;
    -webkit-transition: width 2s, 
	                    height 2s, 
						-webkit-transform 2s;
    transition: width 2s, 
	            height 2s, 
				transform 2s;
	text-align:center;
	vertical-align:center;
}

.postBox-transition1:hover {
    background-color: #999;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tags

HTML5 META Artikel Doctype Header Footer