Transition

11. Januar 2015 -13:10 0 Lydia

Bevor ich euch zeige wie ich meine News Style erstellt habe, komme ich heute dazu euch erstmal zu zeigen was es denn Für Beispiele mit Transition gibt und was damit möglich ist.

Demo anschaun
Hintergrund ändern
<div class="change_bg"></div>
.change_bg {
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: background 0.5s ease-in-out; 
	/*was sich ändern soll , wie lange es dafür brauchen 
        soll in Sekunden, und wie es sich ändern soll*/
	-moz-transition: background 0.5s ease-in-out;
	-o-transition: background 0.5s ease-in-out;
	-ms-transition: background 0.5s ease-in-out;
	transition: background 0.5s ease-in-out;
}

.change_bg:hover {
	background: rgba(50, 50, 50,0.5);
	/*Hier wird festgelegt in welche Farbe es sich ändern soll*/
}
Breite ändern
<div class="change_width"></div>
.change_width {
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: width 0.3s ease-in-out;
	-moz-transition: width  0.3s ease-in-out;
	-o-transition: width 0.3s ease-in-out;
	-ms-transition: width 0.3s ease-in-out;
	transition: width 0.3s ease-in-out;
}

.change_width:hover {
	width:175px;
}
Höhe ändern
<div class="change_height"></div>
.change_height {
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: height 0.3s ease-in-out;
	-moz-transition: height  0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
	-ms-transition: height 0.3s ease-in-out;
	transition: height 0.3s ease-in-out;
}

.change_height:hover {
	height:75px;
}
Breite und Höhe ändern
<div class="change_size"></div>
.change_size {
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all  0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.change_size:hover {
	width:75px;
	height:75px;
}
Border-Radius ändern
<div class="change_borderradius"></div>
.change_borderradius {
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: border-radius 0.3s ease-in-out;
	-moz-transition:border-radius  0.3s ease-in-out;
	-o-transition: border-radius 0.3s ease-in-out;
	-ms-transition: border-radius 0.3s ease-in-out;
	transition: border-radius 0.3s ease-in-out;
}

.change_borderradius:hover {
	-webkit-border-radius: 50%;
	-moz-border-radius:  50%;
	border-radius:  50%;
}
Position ändern

Position des Objekts können wird mittels transform: translate(x,y) verändert werden.

<div class="change_position"></div>
.change_position {
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

.change_position:hover {
	 -webkit-transform: translate(20px,0px); 
	 -moz-transform: translate(20px,0px); 
	 -o-transform: translate(20px,0px); 
	 -ms-transform: translate(20px,0px);
}
Alternative Größe ändern

Hier wird die Größe des Objekt mittels transform: scale(Wert) scaliert.

<div class="change_scale"></div>
.change_scale {
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

.change_scale:hover {
	 -webkit-transform:scale(1.5); 
	 -moz-transform: scale(1.5); 
	 -o-transform: scale(1.5); 
	 -ms-transform:scale(1.5); 
}
Objekt rotieren lassen

Hier wird das Objekt um 360 Grad gedreht mittels transform: rotate(Wert)

<div class="change_rotate"></div>
.change_rotate{
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

.change_rotate:hover {
	 -webkit-transform:rotate(360deg); 
	 -moz-transform: rotate(360deg); 
	 -o-transform: rotate(360deg); 
	 -ms-transform: rotate(360deg); 
}
Objekt um 45° drehen
<div class="change_rotate45"></div>
.change_rotate45{
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

.change_rotate45:hover {
	 -webkit-transform: rotate(45deg);
	 -moz-transform:rotate(45deg);
	 -o-transform: rotate(45deg);
	 -ms-transform: rotate(45deg);
}
Objekt ausfaden
<div class="change_fadeout"></div>
.change_fadeout{
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	opacity:1;
}

.change_fadeout:hover {
	 opacity:0.2;
}
Objekt einfaden
<div class="change_fadein"></div>
.change_fadein{
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	opacity:0.2;
}

.change_fadein:hover {
	 opacity:1;
}
Schatten einblenden
<div class="change_shadow"></div>
.change_shadow{
	width:50px;
	height:50px;
	background: rgba(197, 81, 81,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

.change_shadow:hover {
	box-shadow: 0px 0px 10px rgba(50,50,50,0.7);
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.