Once triggered, transitions can only move from an initial state to a final state. Transitions allow you to alter the behavior and appearance of an element - but only when there's a trigger, like a user hovering over the element. The two terms are often used interchangeably, but animations and transitions are different in CSS. While this looks like an animation, it's actually a transition. See the Pen CSS Transition on Hover by HubSpot ( on CodePen. If you hover over the div, it will gradually change from light pink to dark pink. Hover animations highlight key items on a web page and are an effective way to enhance your site's interactivity. some examples that you can use on your own websiteĪ CSS hover animation occurs when a user hovers over an element with their cursor, and the element responds with motion or another animated effect.how to create a hover animation with CSS.We'll provide everything you need to know about how to create an animation or transition on hover, including Of the pseudo-classes above, :hover is the most common, and it's what we’ll be covering in this post. :target, when a user clicks on a different element.

:active, when a user clicks on the element.:focus, when a user clicks or taps the element, or selects it with the tab key.:hover, when a user hovers over the element.Only in that state will the element change from one style to another. That means creating interactive elements is simpler and more lightweight than it used to be.īoth the CSS animation and transition properties can be specified with pseudo-classes, which define a special state of an element. With CSS, front-end developers can design animations and transitions without JavaScript.

Show pug template on hover