Beispiel:Animation Pythagoras CSS.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Pythagoras Animation mit CSS</title>
<style>
body {
background: #fff;
font-family: sans-serif;
}
svg {
width: min(460px, 96vw);
height: auto;
}
line, path {
fill: none;
stroke-width: 1;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: round;
transform-box: fill-box;
}
#radien path {
fill: none;
stroke: orange;
stroke-width: .5;
stroke-dasharray: 1, 2;
}
text {
fill: green;
font-family: sans-serif;
font-size: 10px;
white-space: pre;
text-anchor: middle;
}
#rechter_winkel, #zahlen, #radien {
opacity: 0;
transform-box: fill-box;
}
.run #linie_5 { animation: linie5 12s linear both; }
.run #linie_4 { animation: linie4 12s linear both; }
.run #linie_3 { animation: linie3 12s linear both; }
.run #zahlen { animation: zahlenOpacity 12s linear both; }
.run #radien { animation: radienOpacity 12s linear both; }
.run #rechter_winkel {
animation:
rechterWinkelOpacity 12s linear both,
rechterWinkelTransform 12s linear both;
}
@keyframes linie5 {
0% { transform: translate(0px, 0px); }
17% { transform: translate(0px, 60px); }
100% { transform: translate(0px, 60px); }
}
@keyframes linie4 {
0% { transform: translate(0px, 0px) rotate(0deg) rotate(0deg); }
17% { transform: translate(5px, 35px) rotate(0deg) rotate(0deg); }
33% { transform: translate(10px, 70px) rotate(90deg) rotate(0deg); }
54% { transform: translate(10px, 70px) rotate(90deg) rotate(0deg); }
61% { transform: translate(10px, 70px) rotate(90deg) rotate(-66deg); }
70% { transform: translate(10px, 70px) rotate(90deg) rotate(-39deg); }
80% { transform: translate(10px, 70px) rotate(90deg) rotate(-53.13deg); }
100% { transform: translate(10px, 70px) rotate(90deg) rotate(-53.13deg); }
}
@keyframes linie3 {
0% { transform: translate(0px, 0px) rotate(0deg) rotate(0deg); }
17% { transform: translate(0px, 0px) rotate(0deg) rotate(0deg); }
23% { transform: translate(0px, 21px) rotate(0deg) rotate(0deg); }
42% { transform: translate(0px, 80px) rotate(-90deg) rotate(0deg); }
50% { transform: translate(0px, 80px) rotate(-90deg) rotate(0deg); }
60% { transform: translate(0px, 80px) rotate(-90deg) rotate(50deg); }
70% { transform: translate(0px, 80px) rotate(-90deg) rotate(21deg); }
83% { transform: translate(0px, 80px) rotate(-90deg) rotate(36.87deg); }
100% { transform: translate(0px, 80px) rotate(-90deg) rotate(36.87deg); }
}
@keyframes zahlenOpacity {
0% { opacity: 0; }
42% { opacity: 0; }
58% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes radienOpacity {
0% { opacity: 0; }
46% { opacity: 0; }
54% { opacity: 1; }
83% { opacity: 1; }
92% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes rechterWinkelOpacity {
0% { opacity: 0; }
83% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes rechterWinkelTransform {
0% { transform: rotate(0deg) translate(0px, 0px); }
83% { transform: rotate(0deg) translate(0px, 0px); }
100% { transform: rotate(-142deg) translate(-12px, 0px); }
}
</style>
</head>
<body>
<p>Pythagoras CSS-Animation <button id="start_button" type="button">Neustart</button></p>
<svg id="pyth" viewBox="0 0 70 70">
<g id="radien">
<path id="radius_3" d="M 10 20 C 27 20 40 33 40 50"/>
<path id="radius_4" d="M 20 50 C 20 28 38 10 60 10"/>
</g>
<line id="linie_5" style="transform-origin:50% 50%" x1="10" y1="-10" x2="60" y2="-10" />
<line id="linie_4" style="transform-origin:100% 50%" x1="10" y1="-20" x2="50" y2="-20" />
<line id="linie_3" style="transform-origin:0% 100%" x1="10" y1="-30" x2="40" y2="-30" />
<g id="rechter_winkel" style="transform-origin:100% 100%">
<path style="fill:none;stroke:green;transform-box:fill-box" d="M 9 19 C 9 13 13 9 19 9"/>
<circle style="fill:green;stroke:none" cx="15" cy="15" r="2"/>
</g>
<g id="zahlen">
<text x="34" y="60">5</text>
<text x="6" y="40" style="font-size:10px">3</text>
<text x="64" y="40" style="font-size:10px">4</text>
</g>
</svg>
<script>
document.addEventListener('DOMContentLoaded', () => {
const svg = document.getElementById('pyth');
const btn = document.getElementById('start_button');
const duration = 12000;
let timeoutId = null;
const restart = () => {
btn.disabled = true;
svg.classList.remove('run');
void svg.getBoundingClientRect();
svg.classList.add('run');
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
btn.disabled = false;
}, duration);
};
btn.addEventListener('click', (e) => {
e.preventDefault();
if (!btn.disabled) {
restart();
}
});
restart();
});
</script>
</body>
</html>
