Differences
This shows you the differences between two versions of the page.
|
se:labs:01 [2025/10/05 20:21] ion_irinel.dinu [Tasks] |
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). | ||
