Beispiel:Animation-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:Grundlayout.css"> <title>CSS-animation - 1</title> <style>
input {
border: medium solid #ccc; transition: border-color 0.3s ease;
}
input:invalid { border-color: red; color: red;
animation: error 0.4s;
}
@media (prefers-reduced-motion: reduce) {
input:invalid {
animation: none;
}
}
@keyframes error {
0% { translate: 0; }
20% { translate: -6px; }
40% { translate: 6px; }
60% { translate: -4px; }
80% { translate: 4px; }
100%{ translate: 0; }
}
</style>
</head> <body>
Animiertes Input
<label for="0bis10">Bitte eine Zahl zwischen 0 und 10 eingeben: </label> <input id="0bis10" type="number" min="0" max="10">
Bitte gib etwas anderes (Buchstaben, Zahlen > 10, etc) ein, um zu testen, wie der Browser falsche Eingaben kennzeichnet. </body></html>
