<!DOCTYPE html> <html> <head> <title>CSS Transition Demo</title> <style type="text/css"> .hoehe { position: absolute; width: 200px; background-color:red; -moz-transition-property: height; -moz-transition-duration: 10s; -webkit-transition-property: height; -webkit-transition-duration: 10s; -o-transition-property: height; -o-transition-duration: 10s; } .hoeheanfang { height: 100px; } .hoeheende { height: 500px; } </style> <script type="text/javascript"><!-- function runDemo() { var el = updateTransition(); el.addEventListener("transitionend", updateTransition, true); } function updateTransition() { var el = document.querySelector("div.hoeheende"); if (el) { el.className = "hoehe hoeheanfang"; } else { el = document.querySelector("div.hoeheanfang"); el.className = "hoehe hoeheende"; } return el; } //--> </script> </head> <body onload="runDemo()"> <div id="header" class="hoehe hoeheanfang">Headerbox</div> </body> </html>
| 28.11.2023
