Predictable Spell Casting Guiding your users with CSS animations

Martine Dowden

# CSS Animations ## Module Level 3

20 March 2009

```CSS @keyframe name { from: {} to: {} } elem { animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-iteration-direction> <animation-fill-mode> <animation-play-state>; } ```

# CSS Transitions ## Module Level 3

20 March 2009

``` transition: <property> <duration> <timing-function> <delay>; ```

## Guideline 2.3 Seizures and Physical Reactions ### Do not design content in a way that is known to cause seizures or physical reactions.

Loading

Load

Animated Graphics

## Scalable Vector Graphics ```XML <svg x="0px" y="0px" viewBox="0 0 94.5 118.5"> <style type="text/css"> /* Put CSS HERE */ </style> <path class="st1" d="M47.2,10"/> <polygon class="st2" points="58.7,27.5 35.7,27.5 30.7,0 63.7,0"/> </svg> ```

Page Transition

Tasks

Number	Date	Name	Task
1	2/11/2019	Stegorim	Brew Potions
2	3/7/2019	Drekalis	Prestidigitation Lab
3	11/17/2018	Guillemette	Organize Grimoirs
4	10/19/2018	Ogorim	Refresh Protection Spells
5	1/5/2019	Ogorim	Tutor Novices

Stats

Settings

Animate

True False

Common Fate

Elements are likely to be perceived as a unit if they move in the same direction.

None

Favorite

• Coffee
• Butter Beer
• Sleep

Segmented

Langagues

• Aklo
• Sylvan
• Orc

Smooth

Play

• Fire
• More Fire!
• Make Go Boom

```css .menuItem { height: 0; overflower: hidden; transition: all 250ms ease-in-out; } .menu.expanded .menuItem { height: 3rem; } ``` ```css transition: all 250ms ease-in-out; ```

Micro Animations

Play

• Fire
• More Fire!
• Boom

Potions

• Coffee
• Disguise
• Vanish

```css button .arrow { transition: all 250ms ease-in-out; } button.expanded .arrow { transform: rotate(-180deg); } ```

Bring Into View

Instant

Tasks

Number	Date	Name	Task
1	2/11/2019	Stegorim	Brew Potions
2	3/7/2019	Drekalis	Prestidigitation Lab
3	11/17/2018	Guillemette	Organize Grimoirs
4	10/19/2018	Ogorim	Refresh Protection Spells
5	1/5/2019	Ogorim	Tutor Novices

Animated

Tasks

Number	Date	Name	Task
1	2/11/2019	Stegorim	Brew Potions
2	3/7/2019	Drekalis	Prestidigitation Lab
3	11/17/2018	Guillemette	Organize Grimoirs
4	10/19/2018	Ogorim	Refresh Protection Spells
5	1/5/2019	Ogorim	Tutor Novices

```css .container { position: relative; } .skip-link { position: absolute; top: 1rem; left: -99rem; transition: all 250ms ease-in-out; } .skip-link:focus { left: 1rem; } ```

Provenace

Instant

Toggle Spell

Revelio

Animated

Toggle Spell

Revelio

## Transform Origin ```CSS .animated-element { transform-origin: xPosition yPosition; } ``` ### example ```CSS .modal { transform-origin: 50% 2rem; } ```

Into thin air

The problem with

display: none

a little bit of necromancy

## Making things disappear ```HTML <button>Toggle Spell</button> <div class="modal" id="modal">Revelio</div> ``` ```CSS .modal { transform: scale(0); transition: all 250ms ease-in-out; diplay: none; } .expanded { display: block; transform: scale(1); } ```

## The magic sauce ```CSS .close { transform: scale(0); } ``` ```JavaScript function close() { const modal = document.getElementById('modal'); modal.classList.add('close'); setTimeout(() => { modal.classList.remove('expanded'); modal.classList.remove('close'); }, 249); } ```

State Change

Instant

Animated

# Animation Timing ## 250ms up to 500ms for more complex animations

Thank You

martine.dev

@Martine_Dowden

martine-dowden

martinedowden