Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:css:css_animacio [2023/02/08 21:20]
admin [Bevezetés]
+++ oktatas:web:css:css_animacio [2023/02/09 22:24] (aktuális)
admin [Animáció újraindítása]
@@ Sor 61: / Sor 61: @@
 </html>
+===== Animáció újraindítása =====
+<code html>
+        <div class="mt-3">
+            <button class="btn btn-primary"
+            id="startButton">
+                Indul
+            </button>
+        </div>
+        <div id="doboz1">a</div>
+</code>
+<code css style.css>
+#doboz1 {
+    background-color: white;
+    width: 20px;
+    height: 150px;
+}
+@keyframes valami1 {
+    from {
+        height: 0;
+    }
+    to {
+        height: 150px;
+    }
+}
+</code>
+<code javascript>
+startButton.addEventListener('click', () => {
+    doboz1.style.animation = 'none';
+    doboz1.offsetWidth;
+    doboz1.style.backgroundColor = 'blue';
+    doboz1.style.animation = 'valami1 4s';
+});
+</code>
 ===== Több fázis megadása =====

szit