9/9

9. CSS Animation

We saw that some CSS selectors such as @media, and pseudo classes (ex. :hover) can be associated to new appearance. By default, the new appearance take effectimmediately. The transition property allows to generate smooth change between two appearances.

Consider the following code of the menu we already used

HTML

<a href="">Home</a>
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>

CSS

a {
    display: inline-block;
    text-decoration: none;
    background: rgba(150,220,250,0.8);
    color: black;
    border: 2px solid black;
    border-radius: 5px;

    padding: 0.5em;
}

a:hover {
    padding: 1em;
}

  • Observe the suddent change of appearance when passing the mouse over the links.

  • Add the following property to the a:hover rule transition: padding 1s; and note that the change of appearance is now smooth.

[Corresponding Webpage]

Note that a suddent change still appears when the mouse is leaving the block. A smooth transition can also be set in adding also the transition property to the a rule.

Exercise

Re-create the behavior shown in the webpage from exercise/01_transition/. You can re-use the HTML and CSS code you used in the previous part from the similar webpage.

[Corresponding Webpage]