Slide 1

Slide 1 text

CSS ANIMATIONS ARE THE AWESOMEST!! @RefreshPitt @vlh Friday, July 12, 13

Slide 2

Slide 2 text

FORGET EVERYTHING YOU KNOW ABOUT CSS Friday, July 12, 13

Slide 3

Slide 3 text

WELL, OK. NOT EVERYTHING. Friday, July 12, 13

Slide 4

Slide 4 text

Friday, July 12, 13

Slide 5

Slide 5 text

VENDOR PREFIXES ARRRRRGGGHHH!!!!!!! Friday, July 12, 13

Slide 6

Slide 6 text

Friday, July 12, 13

Slide 7

Slide 7 text

Friday, July 12, 13

Slide 8

Slide 8 text

Friday, July 12, 13

Slide 9

Slide 9 text

EASING! Friday, July 12, 13

Slide 10

Slide 10 text

ease linear ease-in ease-out ease-in-out steps Friday, July 12, 13

Slide 11

Slide 11 text

ease linear ease-in ease-out ease-in-out cubic-bezier Friday, July 12, 13

Slide 12

Slide 12 text

Friday, July 12, 13

Slide 13

Slide 13 text

Friday, July 12, 13

Slide 14

Slide 14 text

Friday, July 12, 13

Slide 15

Slide 15 text

TIME PROGRESSION Friday, July 12, 13

Slide 16

Slide 16 text

TIME PROGRESSION Friday, July 12, 13

Slide 17

Slide 17 text

Friday, July 12, 13

Slide 18

Slide 18 text

Friday, July 12, 13

Slide 19

Slide 19 text

0% 1 100% 0% 2 100% 0% 3 100% Friday, July 12, 13

Slide 20

Slide 20 text

0% 1 100% 0% 2 100% 0% 3 100% Friday, July 12, 13

Slide 21

Slide 21 text

0% 1 100% 0% 2 100% 0% 3 100% Friday, July 12, 13

Slide 22

Slide 22 text

0% 1 100% 0% 2 100% 0% 3 100% Friday, July 12, 13

Slide 23

Slide 23 text

RESOURCES Friday, July 12, 13

Slide 24

Slide 24 text

Friday, July 12, 13

Slide 25

Slide 25 text

Friday, July 12, 13

Slide 26

Slide 26 text

Friday, July 12, 13

Slide 27

Slide 27 text

Friday, July 12, 13

Slide 28

Slide 28 text

Friday, July 12, 13

Slide 29

Slide 29 text

Friday, July 12, 13

Slide 30

Slide 30 text

@vlh [email protected] codepen.io/valhead Friday, July 12, 13