From b3c4ab61c98fcbe63ce94b32e78bced46140d7b3 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 21 Nov 2023 17:40:33 +0100
Subject: [PATCH] Merge branch 'draft'
---
index.html | 116 ++++++++++++++++++++++++++++++++++++++
assets/html/css-animation.html | 29 +++++++++
assets/html/css-transition.html | 24 ++++++++
3 files changed, 169 insertions(+), 0 deletions(-)
diff --git a/assets/html/css-animation.html b/assets/html/css-animation.html
new file mode 100644
index 0000000..e6361bc
--- /dev/null
+++ b/assets/html/css-animation.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <style>
+ .foo {
+ color: white;
+ animation-duration: 2s;
+ animation-name: slidein;
+ }
+
+ @keyframes slidein {
+ from {
+ margin-left: 100%;
+ }
+
+ to {
+ margin-left: 0%;
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <div class="foo">
+ Hello
+ </div>
+ </body>
+</html>
diff --git a/assets/html/css-transition.html b/assets/html/css-transition.html
new file mode 100644
index 0000000..1aab6e9
--- /dev/null
+++ b/assets/html/css-transition.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <style>
+ .foo {
+ width: 100%;
+ background-color: red;
+ color: white;
+ transition: width 1s ease-out;
+ }
+
+ .foo:hover {
+ width: 50%;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="foo">
+ Hover me!
+ </div>
+ </body>
+</html>
diff --git a/index.html b/index.html
index b950554..68da8e9 100644
--- a/index.html
+++ b/index.html
@@ -3298,6 +3298,122 @@
</code>
</pre>
</section>
+ <section>
+ <h3>Transform</h3>
+ <ul>
+ <li>rein optisch, d.h. "physische" Größe bleibt erhalten</li>
+ <li>eine Art "Shader" auf Grafikebene</li>
+ <li>Effekte wie Drehung, Vergrößerung, Verschiebung usw.</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ transform: translateX(20px) translateY(20px);
+ transform-origin: left;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Mögliche Effekte</h3>
+ <ul>
+ <li>translate</li>
+ <li>rotate</li>
+ <li>scale</li>
+ <li>scew</li>
+ </ul>
+ <p>Die meisten besitzen zusätzlich spezifischere X-, Y- oder 3D-Versionen</p>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Probiere die genannten Transform-Effekte in einer beliebigen Seite aus</p>
+ </section>
+ <section>
+ <h3>Transition</h3>
+ <ul>
+ <li>Elemente können "weich" verändert werden</li>
+ <li>Mögliche Attribute, deren Änderungen animiert werden können sind z.B. <code>width</code>, <code>height</code>, <code>transform</code>, <code>color</code> und viele weitere</li>
+ <li>Das Attribut <code>display</code> lässt sich jedoch nicht animieren</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ width: 100%;
+ background-color: red;
+ /* transition: [Attribut] [Dauer] [Zeitfunktion] */
+ transition: width 1s ease-out;
+ }
+
+ .foo:hover {
+ width: 50%;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-transition.html"></iframe>
+ </section>
+ <section>
+ <h3>Animation</h3>
+ <ul>
+ <li>Es können zusätzlich eigene Animationen entworfen werden</li>
+ <li>Definition per <code>Keyframes</code></li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ animation-duration: 3s;
+ animation-name: slidein;
+ }
+
+ @keyframes slidein {
+ from {
+ margin-left: 100%;
+ width: 300%;
+ }
+
+ to {
+ margin-left: 0%;
+ width: 100%;
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Alternative Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ /* ... */
+ }
+
+ @keyframes slidein {
+ 1% {
+ margin-left: 100%;
+ }
+
+ 100% {
+ margin-left: 0%;
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-animation.html"></iframe>
+ </section>
</section>
</div>
</div>
--
Gitblit v1.9.3