css3_mit_beispiele.html eine datei

CSS3 transition Beispiele - kr@nner.net

CSS3 Animationen: transition erklärt

Hover-Effekt ohne transition

Button

Hover-Effekt mit transition

Button

Veränderung in gleichä���iger Geschwindigkeit

Button

Erst langsam, dann schnell transition-timing-function: ease-in

Button

Erst schnell, dann langsam transition-timing-function: ease-out

Button

Animation mit Verzögerung starten durch transition-delay

Button

Kurzschreibweise von CSS3-transition

Effekt

<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 transition Beispiele - kr@nner.net</title>
<style>
div{
padding:10px 5px;
}
.button{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}
.button:hover{
color:white;
background-color:green;
}
.transition{
transition-property:background-color;
transition-duration:2s;
}
.b_neu{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}

.b_neu:hover{
color:white;
padding-right:120px;
transition-property:padding;
transition-duration:3s;
}
.in{
transition-timing-function: ease-in;
}
.out{
transition-timing-function: ease-out;
}
.del{
transition-delay: 2s;
}
.a_effekt{
background:green;
color:white;
padding:12px;	
}
.a_effekt:hover{
background:red;
    color:white;
}
.a_effekt{
transition:background 4s ease-in 1s;
}
</style>

</head>
<body>

<div>
<h1>CSS3 Animationen: transition erklärt</h1>
<h2>Hover-Effekt ohne transition</h2>
<a class="button" href="#">Button</a>
</div>
<div>
<h2>Hover-Effekt mit transition</h2>
<a class="button transition" href="#">Button</a>
</div>
<div>
<h2>Veränderung in gleichä���iger Geschwindigkeit</h2>
<a class="b_neu" href="#">Button</a>
</div>
<div>
<h2>Erst langsam, dann schnell transition-timing-function: ease-in</h2>
<a class="b_neu in" href="#">Button</a>
</div>
<div>
<h2>Erst schnell, dann langsam transition-timing-function: ease-out</h2>
<a class="b_neu out" href="#">Button</a>
</div>
<div>
<h2>Animation mit Verzögerung starten durch transition-delay</h2>
<a class="b_neu del" href="#">Button</a>
</div>
<div>
<h2>Kurzschreibweise von CSS3-transition</h2>
<a class="a_effekt" href="#">Effekt</a>
</div>
</body>
</html>

 

Hinterlasse jetzt einen Kommentar

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


Diese Seite ist durch reCAPTCHA und Google geschütztDatenschutz-Bestimmungen UndNutzungsbedingungen anwenden.