Skip to Content

A stick figure smiling

Here's a preview from my zine, Hell Yes! CSS!! If you want to see more comics like this, sign up for my saturday comics newsletter or browse more comics!

Image of a comic. To read the full HTML alt text, click "read the transcript".

browse more comics! get the zine!
read the transcript!

an element’s computed style can change

2 ways this can happen:

  1. pseudo-classes
    (like :hover)

  2. Javascript code

new styles change the element instantly…

a:hover {
   color: red;

the element will turn red right away

unless you set the transition property

a {
   color: blue;
   transition: all 2s;
a:hover {
   color: red;

(”all 2s” = will fade from blue to red over 2s)

transition has 3 parts

transition: color 1s ease;

color: which CSS properties to animate
1s: duration
ease: timing function

not all property changes can be animated….

list-style-type: square;

CSS renderer, represented by a box with a smiley face: I don’t know how to animate that, sorry!

…but there are dozens of properties that can

if it’s a number or color, it can probably be animated!

font-size: 14px;
rotate: 90deg; 
width: 20em;

Saturday Morning Comics!

Want another comic like this in your email every Saturday? Sign up here!

I'll send you one of my favourite comics from my archives every Saturday.
© Julia Evans 2024 | All rights reserved (see the FAQ for notes about licensing)