Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:Animation-6.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" media="screen" href="./Beispiel:Grundlayout.css"> <title>CSS-animation - 4</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: 2px solid #ccc; border-radius: 0.4rem;
}
.input-error {
border-color: red; animation:
error, reveal-error 0.35s ease forwards; }
.input-success {
border-color: lime; animation: confirm 0.3s;
}
.error-msg {
color: red; max-height: 0; opacity: 0; overflow: hidden;
}
input.input-error + .error-msg {
animation: reveal-error 0.35s ease forwards;
}
@keyframes reveal-error {
from {
max-height: 0;
opacity: 0;
}
to {
max-height: 4rem;
opacity: 1;
}
}
@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 id="demoForm" novalidate>
<label>
Zahl (0–10)
<input
type="number" id="number"
min="0"
max="10"
required
aria-describedby="num-error"
>
Bitte gib eine Zahl zwischen 0 und 10 ein.
</label>
</form>
<script> document.addEventListener("DOMContentLoaded", () => {
const input = document.getElementById("number");
const msg = document.getElementById("num-error");
input.addEventListener("input", () => {
input.classList.remove("input-error", "input-success");
if (!input.checkValidity()) {
void input.offsetWidth; // force reflow
input.classList.add("input-error");
} else {
void input.offsetWidth;
input.classList.add("input-success");
}
});
}); </script>
</body> </html>
