Beispiel:CSS3 transition.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>transitions</title>
<style>
a {
box-shadow: inset 0 0 #e6f2f7;
}
a:hover,
a:focus {
box-shadow: inset 0 -30px #e6f2f7;
}
#tr1 { transition: all 2s; }
#tr1:hover,
#tr1:focus { }
#tr1 { }
#tr2:hover,
#tr2:focus { transition: all 2s;}
li {
list-style-type:none;
font-size: 1.5em;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<h1>Weiche Übergänge mit <code>transitions</code></h1>
<ul>
<li>
<a id="tr1" href="#">Übergang: langsam → / ← langsam</a>
</li>
<li>
<a id="tr2" href="#">Übergang: langsam → / ← schnell</a>
</li>
</ul>
</body>
</html>
