Usage - Properties
# Usage - Properties
Since SleekMotion is based on [GSAP](https://gsap.com/), it supports all properties that GSAP does. Below are some common properties that you'll most likely use when animating an element.
## CSS
Any CSS property can be animated, however, keep in mind that `camelCase` has to be used for all CSS values. For example, to animate the `background-color` property, you would use `backgroundColor` instead.
```html
```
## Duration
The duration of an animation can be set using the `duration` attribute. The value is in seconds.
```html
```
## Ease
The ease of an animation can be set using the `ease` attribute. The value is a string that represents the ease type.
```html
```
For a list of all available ease types, see the [GSAP documentation](https://greensock.com/docs/v3/Eases).
Since SleekMotion is based on GSAP, it supports all properties that GSAP does. Below are some common properties that you'll most likely use when animating an element.
CSS
Any CSS property can be animated, however, keep in mind that camelCase has to
be used for all CSS values. For example, to animate the background-color
property, you would use backgroundColor instead.
<div class="animate-to:backgroundColor-red"></div>
Copy
<div class="animate-to:backgroundColor-red"></div>
Duration
The duration of an animation can be set using the duration attribute. The
value is in seconds.
<div class="animate-to:backgroundColor-red duration:5"></div>
Copy
<div class="animate-to:backgroundColor-red duration:5"></div>
Ease
The ease of an animation can be set using the ease attribute. The value is a
string that represents the ease type.
<div class="animate-to:backgroundColor-red ease:power3.inOut"></div>
Copy
<div class="animate-to:backgroundColor-red ease:power3.inOut"></div>
For a list of all available ease types, see the GSAP documentation.