1 Dateien geändert
2 Dateien hinzugefügt
| Neue Datei |
| | |
|---|
| | | <!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>
|
|---|
| Neue Datei |
| | |
|---|
| | | <!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>
|
|---|
| | |
|---|
| | | </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> |
|---|
