Beispiel:Animation-2.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 - 2</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 rgb lime;
animation: confirm 0.4s ease;
}
input:user-invalid {
border-color:red;
color: red;
animation: error 0.4s;
}
.error {
color: red;
max-height: 0;
opacity: 0;
overflow: hidden;
}
input:user-invalid + .error {
animation: reveal-error 0.35s ease forwards;
}
@keyframes error {
0% { translate: 0; }
20% { translate: -6px; }
40% { translate: 6px; }
60% { translate: -4px; }
80% { translate: 4px; }
100%{ translate: 0; }
}
@keyframes reveal-error {
from {
max-height: 0;
opacity: 0;
translate: 0 -4px;
}
to {
max-height: 4rem;
opacity: 1;
translate: 0;
}
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
input {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<form novalidate>
<label>
Zahl (0–10)
<input
type="number"
min="0"
max="10"
required
aria-describedby="num-error"
>
<p class="error" id="num-error">
Bitte gib eine Zahl zwischen 0 und 10 ein.
</p>
</label>
</form>
<script>
</script>
</body>
</html>
