Activity: Transitions

This in-class activity consists of 3 parts:

1. Experimenting with some transitions
2. Trying to implement one of the CSS Tricks
3. Experimenting with the ::before and ::after pseudo-classes

Please download the exercise files (below).

Download Activity Files

1. Experimenting with Transitions

Relevant References

• What are pseudoclasses?
• The transform property

Uncomment the relevant CSS style blocks

Inside of the in-class-exercise folder, take a look at the HTML and CSS files to get oriented with them. Then, before making any changes to the code, preview the index.html page in your web browser.

After previewing your webpage, uncomment the following lines inside your styles.css style block:

/*
#section1 {
    background: #0c7474;
    color: white;
    transition: all 0.3s ease-out;
}

#section1:hover {
    background: purple;
    width: 220px;
    height: 220px;
}
*/

When you’re done, preview the page, noting what changed. When you hover over the first section, you the section should grow and change color (horray)!

Create two more transition effects

Your job is to experiment with the other two section tags (#section2 and #section3) by making some interesting interactions, using transitions. Some tips:

1. To make a transition, you define a transition inside of a style block (e.g., #section1) as follows: transition: <property> <duration> <timing-function> <delay>; Examples:
   • transition: all 0.3s ease-out;
   • transition: background 1s ease-in;
   • transition: all 3s linear;
   • transition: all 0.3s ease;
2. Some properties that you may want to change:
   • border-radius
   • margin
   • padding
   • width
   • height
   • border-width
   • background-color
   • rotation
   • opacity
   • transform. Examples
     transform: skewX(20deg);
     transform: rotate(-10deg);

Feel free to look at sample-files/01-pseudo-classes and sample-files/02-pseudo-classes-with-transitions to get ideas.

2. Implement one of the CSS Tricks Effects

Relevant References

• CSS link hover effects + CodePen
• CSS link hover effects: animated underline
• CSS link hover effects: getting creative with text shadows + CodePen

When you’re done with parts 1-2, please try experimenting with hyperlink hover effects. Recall that hyperlinks have several relevant states that you want to style:

• a
• a:link
• a:hover (the main interactive state)
• a:focus (if the person tabs to the link)
• a:visited (if you want the style of visited links to look different)
• a:active (if you want a different style when the person clicks the link)

Click on some of the “CSS Tricks” links above, and see if you can implement one of the techniques that you find interesting.

3. selector::before and selector::after pseudo-classes

If you have time, try to implement a “before” or an “after” pseudo-class on an eleement. See the sample-files/01-pseudo-classes folder for some examples (or you can copy in the example and then adapt it).