Differences
This shows you the differences between two versions of the page.
|
se:labs:01 [2025/10/06 20:48] ion_irinel.dinu [Animations!] |
se:labs:01 [2025/10/06 20:50] (current) ion_irinel.dinu [Animations!] |
||
|---|---|---|---|
| Line 418: | Line 418: | ||
| - | 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). | ||
