The human brain is hardwired to pay attention to moving objects. Because of this natural reflex to notice movement, adding animation to your website or app is a powerful way to draw users attention to important areas of your product and add interest to your interface.

When done well, animations can add valuable interaction and feedback, as well as enhance the emotional experience, bring delight, and add personality to your interface. In fact, to animate means to bring to life. — Rachel Cope

<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />

Heads Up

This is a big chapter. It’s not intended to be fully understood/memorised all in one reading. Treat it as an introduction to thinking about ways to create motion graphics effects and animation on the web, using CSS. It might serve as a useful reference point for when you are trying to replicate a certain kind of visual effect later on.

</aside>

<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />

By the end of this worksheet, you will be able to:

• Get and set element sizes with jQuery (.width(), .height()) and understand .innerWidth()/.outerWidth() variants.
• Get, set, and remove HTML attributes with jQuery (.attr(), .removeAttr()), and toggle classes to change styles.
• Write transition rules using both shorthand and expanded properties, and know what property, duration, timing-function, and delay do.
• Trigger transitions via :hover, class toggles, or JavaScript-driven style changes.
• Use jQuery to animate by changing CSS (eg. applying transforms) and understand when transitions will run.
• Understand the difference between transitions (state-to-state) and animations (timeline with keyframes).
• Define keyframes with @keyframes and apply them with animation-* properties (name, duration, timing, delay, iteration-count, direction, fill-mode, play-state).
• Start, restart, and pause/resume CSS animations using class changes and animation-play-state.
• Optional: Build a simple scroll-linked effect by mapping scroll position to animation progress. </aside>

Before we begin our discussion about CSS Transitions and CSS Animations let’s talk about some helper jQuery actions that might come in handy alongside this chapter.

Dimensions: Widths and Heights

Just like we learned about finding the position of elements (using the .position() and .offset() actions and accessing their left and top keys), jQuery has some helper actions that fetch the dimensions of elements: .width() and .height().

• .width() gets (or sets) the content width of an element (excluding padding, border, and margin).
• .height() gets (or sets) the content height.

Getting values

If called without arguments (ie. without values in their parentheses), they return the current* computed value in pixels:

let w = $('#box').width();
let h = $('#box').height();

<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />

“Current Computed Value”

• Remember that elements have the capacity to change in size — depending on their content, or updated style rules — so the value returned represents the dimensions of the element the time it was asked.

</aside>

Setting values

If .width() and .height() are called with an argument (ie. with values in their parentheses), they set the width or height:

$('#box').width(300);
$('#box').height('10vh');