# Introduction to CSS Transitions | KIRUPA

**URL:** <https://forum.kirupa.com/t/introduction-to-css-transitions-kirupa/636240>\
**Category:** programming\
**Created:** [March 20, 2017, 9:19am UTC](https://forum.kirupa.com/t/introduction-to-css-transitions-kirupa/636240 "2017-03-20T09:19:49Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 20, 2017, 9:19am UTC](https://forum.kirupa.com/t/introduction-to-css-transitions-kirupa/636240/1 "2017-03-20T09:19:49Z")

</div>

by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 20 October 2016

When interacting with UIs, a lot of the animations you will see won't be of the [CSS animation kind](https://www.kirupa.com/html5/introduction_css_animations.htm) with their predefined keyframes. They will instead be reactions to the things you are doing. Examples of such reactions include a link underlining when you hover it, a menu flying in when you tap on a button, a text element getting bigger when it has focus, and a billion other things. For animating these kinds of situations, you have what are known as **CSS Transitions**.

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/introduction\_css\_transitions.htm](http://www.kirupa.com/html5/introduction_css_transitions.htm)