Design Template by Anonymous

How to Trigger Transitions

As mentioned previously, we can trigger our animations through pseudo classes, like :hover. As you might be able to guess, there are more that we can use. They are listed below.

• :hover : Triggers when element is moused over
• :active : Triggers when element is clicked on
• :focus : Triggers when element is selected by tabbing over
• :focus‐within : Triggers when element ID matches URL fragment
• :target : Triggers when element is moused over
• class : Class change from Javascript

Here is an example of using both :hover and :active.

          
            .element {
                width: 100px;
                transition: width 2s ease 0.5s;
            }

            .element:hover, .element:active {
                width: 150px;
            }