Intro to CSS Animations with Victor Lourng 

Hi, I’m Victor. •I make websites for a living. •Yes, I’m in high school. 

What is an animation? •A change from one style to another. 

What is an animation? •A change from one style to another. • Properties • Transitions • Keyframes 

Properties •Attributes of an element being changed Color 

Properties •Attributes of an element being changed Color 

Properties •Attributes of an element being changed Color Shape 

Properties •Attributes of an element being changed Color Shape 

Properties •Attributes of an element being changed Position Color Shape 

Properties •Attributes of an element being changed Position Color Shape 

Properties •Attributes of an element being changed • Size • Rotation • Opacity • (and so on) 

Transition •How the properties will animate • http://codepen.io/LabLayers/pen/MwzgNB •Full list: • http://easings.net/ •Why is this important? • Cars • Tennis balls 

Keyframes •Steps of attributes (and sometime transitions) • At 0%, move down • At 25%, move right • At 50%, move up • At 75%, move left 

Keyframes •Steps of attributes (and sometime transitions) • At 0%, move down and turn green • At 25%, move right and turn blue • At 50%, move up and turn purple • At 75%, move left and turn red 

What is an animation? •A change from one style to another. • Properties • Attributes of an element being changed • Transitions • How the properties will animate • Keyframes • Steps of attributes (and sometime transitions) 

Put it together and you’ll get… 

No content

Animating Elements in CSS •It’s not that hard (really!) 

Animating Elements in CSS •It’s not that hard (really!) • Properties • Attributes of an element being changed • Transitions • How the properties will animate • Keyframes • Steps of attributes 

Translation into CSS •It’s not that hard (really!) • Properties • Standard CSS properties like color: red • Transitions • transition: all 500ms linear; • Keyframes & Animations • @keyframes myAnimation { } • animation: myAnimation; 

CSS Transition Syntax transition: color 200ms linear 500ms; transition-property: color; transition-duration: 200s; (transition-timing-function: linear;) (transition-delay: 500ms;) 

CSS Transitions •It’s simple. .button { background: purple; color: white; } .button:hover { transition: 300ms all ease; background: white; color: purple; } 

CodePen Follow-Along • Start here: • http://tiny.cc/csstransitions • End result: • http://tiny.cc/csstransitions2 • Click the icon in the bottom right hand corner to toggle display mode 

CSS Keyframe Syntax .circle { animation: my-animation 5s; } @keyframes my-animation { 0% {background: red;} 50% {background: blue;} 100% {background: green;} } 

CSS Animation Syntax animation: my-animation 5s linear 0s infinite alternate running; animation-name: my-animation; animation-duration: 5s; (animation-timing-function: linear;) (animation-delay: 0s;) (animation-iteration-count: infinite;) (animation-direction: alternate;) (animation-play-state: running;) 

CodePen Follow-Along • Start here: • http://tiny.cc/csskeyframes • End result: • http://tiny.cc/csskeyframes2 

Chrome Developer Tools • Great for debugging Javascript & CSS • Right an element with an animation and select Inspect Element • On the right Styles pane, you can slow all animations or change the curve 

Cool Examples • http://codepen.io/bennettfeely/pen/ErFGv • http://cssdeck.com/labs/felix-the-magic-bag-animation • http://www.species-in-pieces.com/ • http://bennettfeely.com/csscreatures/ • http://www.sanrio.com/timeline 

Where I Use CSS Animations • http://brainitch.com/ers/ • http://booksmart.it/ • https://everfreenw.com/archive/2015/everfree-northwest- 2015/index.html • https://chrome.google.com/webstore/detail/harlem-shake- the-web/ldejkceiibdbkgjfiagpjhjdadgkelib?hl=en Advice for Beginners • https://www.youtube.com/watch?v=E1oZhEIrer4 

Thank you!