Differences
This shows you the differences between two versions of the page.
|
se:labs:01 [2025/10/05 19:46] ion_irinel.dinu [Taiwlind] |
se:labs:01 [2025/10/06 20:50] (current) ion_irinel.dinu [Animations!] |
||
|---|---|---|---|
| Line 401: | Line 401: | ||
| CSS also allows us to animate HTML elements. Let's bring back the photo above: | CSS also allows us to animate HTML elements. Let's bring back the photo above: | ||
| - | <html><img src='https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg' class='animated' /></html> | + | <html><iframe width="250" height="250" srcdoc=' |
| + | <style> | ||
| + | .box { | ||
| + | width:100px; height:100px; background:#4a90e2; | ||
| + | animation:image-animation-example 2s infinite; | ||
| + | } | ||
| + | @keyframes image-animation-example { | ||
| + | from {border-radius:0; transform:scale(1); opacity:1;} | ||
| + | 50% {border-radius:100px; transform:rotate(180deg); opacity:0;} | ||
| + | to {border-radius:0; transform:rotate(360deg); opacity:1;} | ||
| + | } | ||
| + | body {display:flex; justify-content:center; align-items:center; height:100vh; margin:0; background:#f4f4f4;} | ||
| + | </style> | ||
| + | <div class="box"></div>'></iframe> | ||
| + | </html> | ||
| - | If we take a look at the CSS applied to the image, we get a hint on how CSS animations work: | + | If we take a look at the CSS applied inside the iframe, we can understand how CSS animations work: |
| <code css> | <code css> | ||
| - | .image-css-example .animated { | + | .box { |
| - | animation-name: image-animation-example; | + | width: 100px; |
| - | animation-duration: 2s; | + | height: 100px; |
| - | animation-iteration-count: infinite; | + | background: #4a90e2; |
| + | animation: image-animation-example 2s infinite; | ||
| } | } | ||
| @keyframes image-animation-example { | @keyframes image-animation-example { | ||
| - | from { | + | from { border-radius: 0; transform: scale(1); opacity: 1; } |
| - | border-radius: 0; | + | 50% { border-radius: 100px; transform: rotate(180deg); opacity: 0; } |
| - | transform: scale(1); | + | to { border-radius: 0; transform: rotate(360deg); opacity: 1; } |
| - | opacity: 1; | + | |
| - | } | + | |
| - | + | ||
| - | 50% { | + | |
| - | border-radius: 100px; | + | |
| - | transform: rotate(180deg); | + | |
| - | opacity: 0; | + | |
| - | } | + | |
| } | } | ||
| + | |||
| </code> | </code> | ||
| - | As you can see, we use a couple of rules: | ||
| - | * ''%%animation-name%%'' - this tells the browser what animation rules to use | + | As you can see, we use a few key properties: |
| - | * ''%%animation-duration%%'' - this is evident - the duration that the animation will run for | + | * animation-name – specifies which animation sequence to apply |
| - | * ''%%animation-iteration-count%%'' - this defines the number of times the animation will repeat | + | * animation-duration – defines how long the animation lasts (2 seconds in this case) |
| + | * animation-iteration-count – controls how many times the animation repeats (here, it loops infinitely) | ||
| These three rules are the bare minimum needed in order to add an animation to a HTML element. But we still need to define how the animation will look like. We do this by using a ''%%@keyframes%%'' declaration, followed by the animation name (the one we set in the ''%%animation-name%%'' property). | These three rules are the bare minimum needed in order to add an animation to a HTML element. But we still need to define how the animation will look like. We do this by using a ''%%@keyframes%%'' declaration, followed by the animation name (the one we set in the ''%%animation-name%%'' property). | ||
| Line 564: | Line 573: | ||
| **Task 1** - Modify the //task.css// file from {{:se:labs:task1.zip|Task 1}} to make the human do something (e.g. jump). | **Task 1** - Modify the //task.css// file from {{:se:labs:task1.zip|Task 1}} to make the human do something (e.g. jump). | ||
| - | **Task 2** - Create a personal page and host it using GitHub Pages. Here are two examples of personal pages: | + | **Task 2** - Modify the //task2.html// from {{:se:labs:task2_tailwind.zip|Task 2}} and center a box (div) on the screen using three different Tailwind approaches. |
| - | * [[https://www.cosmindumitrache.com/|Example1]] | + | |
| - | * [[https://juokaz.com/|Example2]] | + | **Task 3** - Create a personal page and host it using GitHub Pages. Here are two examples of personal pages: |
| + | * [[https://geocushen.com|Example1]] | ||
| + | * [[https://www.taniarascia.com/|Example2]] | ||
| ====== Feedback ====== | ====== Feedback ====== | ||
