Beispiel:Animation-3.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 - 3</title> <style>
body {
font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 100vh; background: #f5f5f5;
}
form {
background: white; padding: 2rem; border-radius: 0.5rem; width: 20em; display: grid; gap: 1.5rem;
}
input {
font-size: 1rem; padding: 0.6rem; border: medium solid #ccc; border-radius: 0.3rem; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus {
box-shadow: 0 0 0 3px blue;
}
input:focus:valid {
border-color: green; box-shadow: 0 0 0 3px green; animation: confirm 0.4s ease;
}
input:user-invalid { border-color: red; color: red; animation: error 0.4s; }
@keyframes error {
0% { translate: 0; }
20% { translate: -6px; }
40% { translate: 6px; }
60% { translate: -4px; }
80% { translate: 4px; }
100%{ translate: 0; }
}
@keyframes confirm {
0% { scale: 1; border-color: green;}
50% { scale: 1.05; border-color: lime;}
100% { scale: 1; border-color: green;}
}
/* reduced motion */ @media (prefers-reduced-motion: reduce) {
input {
animation: none !important;
transition: none !important;
}
} </style> </head>
<body>
<form>
<label> Zahl (0–10) <input type="number" min="0" max="10" required> </label>
<label> E-Mail <input type="email" required> </label>
</form>
<script> document.addEventListener('DOMContentLoaded', function () { const inputs = Array.from(document.querySelectorAll("input"));
inputs.forEach((input, index) => {
input.addEventListener("change", () => {
if (input.checkValidity()) {
const next = inputs[index + 1];
if (next) next.focus();
}
});
});
}); </script>
</body> </html>
