CSS: How to make the transition animation work only when the mouse passes over the element

Question

When you place Transition on an object, every time you refresh the page, that animation/transition takes place. Is it possible to leave it exclusively for the action you want? For example :Hover?

I know I can do css this way:

#button{
   background-color: #fff;
   padding: 10px 20px;
}
#button:hover{
   background-color: #000;
   transition: background-color 0.25s;
} 

But this way only works when passing the mouse, the transition will not occur when you have the mouse output on the object. Without being javascript, has to leave exclusively for a certain action?

Answer 1

Puts a transition: background-color .5s ease;

If you put the transition only in the Hover it will have the animation only when you pass the mouse, but if you put the transition in the element itself type...

element{
transition: background-color .5s ease;
}

This animation will occur whenever you move the mouse or remove the mouse from the top of the element, the coolest thing is that it works with :Focus and :active, in fact, it works for a lot more than that.