Comprehensive Guide to Layout Building #3 [ Smooth Moves: Animations and Interactive Elements ]

Welcome again! This is the third entry in a blog series about constructing your own layout. In this post, we will touch on the following topics for intermediates to understand:

1. Pseudoselectors, what they are, and how to implement them.
2. The transition property and how to use it.
3. Keyframe animations: how to create them and use them to add dynamic elements to your layouts.

By incorporating animations into your design, you can add interactivity and visual interest to your layout. Once you fully understand these concepts and master them, you'll be able to create effects like the one below:

Conditional pseudoselectors allow you to apply styles based on specific conditions or states of an element. They are particularly useful for creating interactive layouts without relying on scripts. You might have seen the ones below:

:hover

Hover is true when the element has the cursor inside it's rendered bounds.

#hovershowcase {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 5rem;
     height: 5rem;
     background: rgb(70, 50, 70);
     padding: 0.25rem;
}
 #hovershowcase:hover {
     background: red;
}
              

This works with a multitude of different properties, and can be used to play animations when needed. Although some things such as animating images / linear gradients are harder to do.

:active

Active is used on elements with an active state, such as buttons.

#activeshowcase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 5rem;
  background: rgb(60, 60, 102);
  border: 1px solid rgb(180, 190, 200);
  border-radius: 0.25rem;
  padding: 0.25rem;
  color: white;
}

#activeshowcase:active {
  transform: translate(-50%, calc(-50% + 2px));
  box-shadow: 0px 3px 14px rgba(200, 240, 255, 0.4);
}
             

If you click on the button above it will render the properties displayed in the :active psuedoclass. This can also be used on other elements such as div, img, p.

:target

Used to detect if the current URL contains an id fragment relating to the selected element's endowed ids.

Find out more here

When these are considered true, they will change the element to render with the attributes set inside their rule decorations. This can look very janky if you don't want elements jumping around or instantly changing color; the section below will go over how to remedy that.

Transition allows you to use easing functions on an element's properties to make changes to them appear smoother.

#transitionshowcase {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7rem;
  height: 7rem;
  background: rgb(60, 60, 102);
  border: 1px solid rgb(180, 190, 200);
  border-radius: 0.25rem;
  padding: 0.25rem;
  color: white;
  transition: all 400ms;
  font-size: var(--g-300);
  font-weight: 700;
}
#transitionshowcase:hover {
  transform: translate(-50%, calc(-50% 2px));
  box-shadow: 0px 3px 14px rgba(200, 240, 255, 0.4);
}
               

You can edit the parameters you put into this function to change the defaults for different effects:

transition: background 1s 230ms ease-out;

This specific transition function is set up to only act on the background element, and to have a 0.23 second delay before changing. It uses the ease-out easing function and is set to run for 1 second.

Heres another example, this time using a custom cubic-bezier() function to create a cubic back curve. The example animation is a 3D rotate transform.
transition: all 0.53s 200ms cubic-bezier(0.1, 0.6, 0.7, 0.2);

That ends off this section, to summarize:

The transition property is a simple and versitile function for easing sudden transforms, it should be used liberally as there aren't many cases where you don't want to ease transforms.

Next section will be about making more advanced keyframe animations.

Using @keyframes and it's sibling CSS function animation: _____; is the key to advanced sequenced animations. Keyframe animations can be used to create effects such as:

• Flickering
• Rainbow Effects / Looping color transitions
• Bobbing
• Automatic scrolling
• Paralax effects *exclusive to newer versions of CHROMIUM browsers
• Controlled Movement

Keyframe animations are more complex to setup due to the fact they are variable based, you have to use percentage math to get an exact set time. (i.e 10% of 1s is 0.1s)

To get set up, first you must set up an actual keyframe sheet; this will be where you define your animation. Each percentage rule defines when values should be changed, the inner contents of which will be the properties that are edited on runtime.

@keyframes exampleAnimation {
    0% {
         rotate: 10deg; 
    }

    100% {
         rotate: -10deg; 
    }
}

After you set up your keyframe sheet, you will define an animation function the element you want animated. It should look something like this:

animate: exampleAnimation /*animation name*/ 1s /*animation duration*/10s /*delay*/ linear /*easing function*/;

Once you do this, your animation will play after the set delay. If you do not have a delay set on your animation function, it will play as soon as the stylesheet is loaded. You can also make it so that animations play when an element is currently under a state such as :hover.

@keyframes exampleAnimation {
    0% {
        rotate: 10deg;
    }

    100% {
        rotate: -10deg;
    }
}

div.example {
    /* styles ... */
    animate: exampleAnimation 1s linear;
    animation-play-state: paused;
}

div.example:hover {
    animation-play-state: runnning;
}

Each value you put into the function will determine a lot, for example; this element showcased below has it's iteration-count set to infinite.

This one has it's easing-function set to ease-in-out.

The animation property has multiple settings on it due to the fact it is an encapsulating function, every variable is meant to set a different animation property. Newer attributes such as animation-timeline require it's own declaration.

Below are the values you can put into an animation function as of November 2024:

• The name of your animation.
• One or two occurances of a time value.
  • First will define animation time.
  • Second will define animation delay.
• Either no occurances of, or occurances of every value above (each value can be defined only once):
  • Easing function (defualt ease functions, cubic-bezier, linear)
  • Iteration count (any number, or infinite)
  • Animation direction (normal, reverse, alternate, alternate-reverse)
  • Animation direction (none, forwards, backwards, both)
  • Animaton play state (paused, runnning)

In conclusion, keyframe animations are useful for a lot of different effects you may want to display. And it can be used in newer browsers to set up layout shifts which are scroll dependant, this makes it a great property to learn for people who want to start creating more advanced layouts.

Sorry for the delay between parts, I had other responsibilites to attend to and working on the blog wasn't feasable. Although now, i'll probably start writing the fourth part of this blog series. Once every part of this layout building guide is done, i'll work on a smaller series of blogs for more specific, advanced topics.

Also i may start writing about some projects i'm working on, and maybe allow people to test them.