##### What's happening now? By adding the `transition` property we can see that we now have an animation. This is because the browser is interpolating (calculating intermediate steps) between the two states, in this case a change in image size and a shadow. ##### Transitions In the example I used the `transition` property as shorthand, but let's look in detail at the properties we have available. | Property | Function | | --------------------------- | ---------------------------------------------------------------------------------- | | transition-property | CSS property to which we want to apply the transition | | transition-duration | Time elapsed between states | | transition-timing-function | Function that defines how the transition is calculated | | transition-delay | Time elapsed until the transition starts | | transition | Works as shorthand to define the previous properties in a single line |

##### @keyframes Transitions are very useful for controlling animation between two states, but if we want to animate more than 2 states, we have to use `@keyframes`: ![Animation](https://res.cloudinary.com/nucliweb/image/upload/c_scale,dpr_auto,f_auto,q_auto,w_896/v1692638675/joanleon.dev/assets/animacion-web/animation.png)

In the example we can see that there's an `animation: scale 2s infinite ease;` property in the `.logo` class and then a `@keyframes` function where we define 3 states for the animation. We're doing it with percentages `0%`, `50%` and `100%`, they refer to the timeline we've defined as 2 seconds in the `animate` property. Like `transition`, I used the `animate` property as shorthand, the properties we can use to define an animation are: | Property | Function | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | animation-name | Name of the animation, which we've defined in `@keyframes` | | animation-duration | Animation duration | | animation-timing-function | Specifies how a CSS animation should progress through each cycle's duration | | animation-delay | Time elapsed until the animation starts | | animation-iteration-count | Number of animation repetitions | | animation-direction | Indicates whether the animation should rewind to the starting frame when finishing the sequence | | animation-fill-mode | Specifies the mode in which a CSS animation applies its styles, establishing its persistence and final state after execution | | animation-play-state | Determines whether an animation is running or paused | > Don't worry if you don't understand something, in future articles we'll go into detail about how the `animation` property and `@keyframe` work.

#### 2.SVG SVG graphics (in HTML) end up being represented in the browser as elements that are part of the DOM, so we can also animate them with CSS. In this example we animate the color of two of the logo elements with CSS.

SVG has its own specification for animating elements, but it's obsolete, so I'm not going to comment on it. But I'll leave you this link "[SVG animation with SMIL](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL)" in case you're curious _(I was and looked at how it works_ 🤪*)*.

#### 3.JavaScript For web animation with JavaScript, natively, we have the [Web Animation API](https://www.w3.org/TR/web-animations-1/) (WAAPI) at our disposal.

In the example with WAAPI we achieve the same effect as the previous version, but this time the animation is defined in JavaScript, with all the programmatic potential that entails. This looks very promising, but the bad news is current browser support. ![Web Animations API](https://res.cloudinary.com/nucliweb/image/upload/c_scale,dpr_auto,f_auto,q_auto,w_896/v1692638675/joanleon.dev/assets/animacion-web/web-animation.png) As we can see on [Can I Use](https://caniuse.com/#feat=web-animation) we're far from being able to implement natively. We can use a [polyfill](https://web-animations.github.io/web-animations-demos/), but we'll see that in an article dedicated to Web Animation API. That's why JavaScript libraries are based on their own animation and transformation API with CSS. We'll see it in detail when we look at JS libraries.

#### 4.Canvas The `canvas` element has an API for drawing graphics. Actually animations in `canvas` are defined and controlled with JavaScript, but I wanted to treat it separately because the way of animating inside this canvas is very different. Here's an example from [Ana Tudor](https://twitter.com/anatudor).

We'll see in more detail how to animate in this element in future articles, as there's a lot of potential... and you can't even imagine if we bring the **WebGL** API or **Shaders** into play, you'll see how much fun we're going to have. ## Resources At the very general level I've talked about Web Animation, I would have to put many references. We're going to see all these topics in detail one by one, so we'll have the resources detailed in the following articles. But I'll leave you a link to [People You Should Follow on CodePen](https://github.com/nucliweb/People-You-Should-Follow-on-CodePen), a list of artists that I think are very interesting to follow on **CodePen**.