Summary  
This chapter covers how to configure the timing aspects of animations using CSS properties—animation-duration, animation-delay, and animation-timing-function—to control how long an animation runs, when it starts, and how it accelerates or decelerates.

General domain of usage  
Front-end web development

Let's consider all possible ways to work with the animation time.

### animation-duration property
`animation-duration` sets the time required for an animation to complete one cycle (change from the initial to the final state), measured in either seconds (`s`) or milliseconds (`ms`).
```css
animation-duration: 3s | 3000ms
```

Let's run the following example and hover the box:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4yczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjVzPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgxKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAxczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDIpIHsKICBhbmltYXRpb24tZHVyYXRpb246IDJzOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMykgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogNXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-timing-function property 
`animation-timing-function` determines how the animation progresses over time, controlling the acceleration and deceleration of the animation. The `animation-timing-function` can have the same values as the `transition-timing-function` property. Several predefined timing functions are available, such as `linear`, `ease`, and `ease-in-out`, or we can define a custom cubic bezier curve using the `cubic-bezier()` function.
```css
animation-timing-function: time_function
```
Let's apply different time_functions to the boxes in the example:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+ZWFzZTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPmVhc2UtaW48L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5lYXNlLW91dDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW47Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1vdXQ7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-delay property 
`animation-delay` sets the time that should elapse before animation starts. It can be specified in seconds (`s`) or milliseconds (`ms`).
```css
animation-delay: 0.1s | 100ms
```
Let's apply different delays to the boxes in the example:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MTAwbXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zMDBtczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjEwMDBtczwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tZGVsYXk6IDEwMG1zOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi1kZWxheTogMzAwbXM7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLWRlbGF5OiAxMDAwbXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

We can specify the time delay for the animation to start, the time during which the animation will process, and also the animation progress over the time.

Level up your styling skills by mastering advanced CSS techniques for modern web design. Position and manage elements with precision using advanced positioning strategies. Create smooth transitions and engaging animations to enhance user experience. Transform and manipulate elements for dynamic visual effects. Build responsive designs that adapt across devices and learn to streamline your workflow with CSS preprocessors like Sass.

Research what learners can expect from this advanced HTML and CSS styling course. What do you need to know before starting the course? What topics will be covered in it?

Position and manage elements on the web pages. Learn about the different positioning properties, discover how to use the stacking order to control the visibility of elements that overlap each other, and finally, handle content overflow. 

Research the power of transitions and learn how to improve the user experience. Discover how to liven properties smoothly and gradually, creating seamless state transitions.

Learn about the animation property and how it can be used to create dynamic and engaging designs. Discover how to create complex animations using keyframes and how to control the animation.

Explore the transformation property, which allows modifying the appearance and position of elements on a webpage. Learn how to scale, rotate, skew, and translate elements in two and three dimensions. Combine multiple transformations to create more complex effects.

The principles and techniques used in adaptive/responsive design aim to make websites and applications accessible and visually appealing across different devices, screen sizes, and orientations.

Learn about preprocessors in CSS and how they can help to write more efficient and maintainable code. Understand how to use preprocessors to simplify the workflow and generate cleaner CSS code.

Defining Animation Duration and Timing

animation-duration property

animation-timing-function property

animation-delay property

Awesome!

Defining Animation Duration and Timing

animation-duration property

animation-timing-function property

animation-delay property