Questions about CSS3 Transition: Where should transition be put?

CSS's transition allows the CSS's property values to transition smoothly over a specified period of time. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any changes to the element, and smoothing the CSS's property values by animating the effect gradually.

Generally we use hover to change CSS values

In writing, it is possible for beginners to be puzzled, not clear whether transition is written in the ordinary state of the elements, or written in the hover state of the elements, in order to clear and intuitive description, here to give a chestnut, write only the key parts

Html:

<class= "Demo1">Transition placed in the normal state </Div > <  class= "Demo2">Transition placed in hover status </Div >

Css:

Div{width:100px;Height:100px;background:#333;Color:#fff;margin:20px}. Demo1{-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-ms-transition:All 1s ease;-o-transition:All 1s ease;transition:All 1s ease;}. Demo1:hover{background:#ccc;Color:#333;width:200px;}. Demo2{    }. Demo2:hover{background:#ccc;Color:#333;width:200px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-ms-transition:All 1s ease;-o-transition:All 1s ease;transition:All 1s ease;}

The demo can be seen, in fact, the transition state is divided into two parts, forward and reverse, that is, MouseEnter and mouseleave generated by the dynamic effect; When transition is placed in the hover state of the element, it will only produce a forward over-animation

Questions about CSS3 Transition: Where should transition be put?