Week 13: CSS Animations: Transforms and Transitions

This week focus was on CSS Animations: Transforms and Transitions from Colt Steele The Advanced Web Developer Bootcamp.

 -Introduction to CSS Animations
 -Why Animations Matter
 -Intro To Pseudoclasses
 -Pseudo-Classes: Hover  
 -Pseudo-Classes focus 
 -Pseudo-Classes: Active 
 -Introduction to Transform 
 -Transform: Translate
 -Transform: Scale() and Transform-Origin
 -Transform: Rotate() 
 -Transitions Basics 
 -Transitions-Duration and Transitions-Property
 -Transitions-Timing-Function and Transitions-Delay
 -Transitions Shorthand

Introduction to CSS Animations

CSS Animations can make information easier to convey to the end user by being more obvious when to click something or to locate additional resources.

Why Animations Matter

CSS Animations can increase accessibility as well as draw attention to details and make things clearer.
The thing about CSS animations is that getting things to move is easy but planning how they should move is hard.

Intro To Pseudoclasses

How to trigger animations
Animations are usually triggered by a scroll, hover or a click.
Pseudo-classes are commonly used triggers that are special selectors that you add on to another selector.

Selector:pseudo-class {
property: value; 
}

Pseudo-Classes: Hover

div:hover {
background: purple; 
}

Hover is triggered by a user mousing over.

Pseudo-Classes Focus

-Pseudo-Classes focus

input:focus {
color: red; 
}

Focus triggers when an element receives focus. Usually inputs will receive a focus.

<input type=”text” /> 

Pseudo-Classes: Active

Active triggers when an element is being activated by user

button:active {
color: green; 
}

Building An Animated Button

https://codepen.io/Colt/pen/EXWGam

Introduction to Transform

Lets you manipulate the coordinate space of the CSS visual formatting model.
Lets you move, warp, rotate, and scale elements.

Transform: Translate

Move something around

div {
transform: translateX(100px); 
} 

https://codepen.io/Colt/pen/GEmOjv?editors=1100

Transform: Scale() and Transform-Origin

Scaling alters the size of an element

div {
transform: scale(2); 
} 

This will double the size of the divs

Transform: Rotate()

Using CSS to rotate things

div {
transform: rotate(45deg); 
}

Rotate is useful for loading icons or for showing any kind of progress on the page that is circular.

Transitions Basics

Transitions Allow us to control animation speed when changing CSS properties. There are 4 transition properties.
-transition-duration is how long the change takes
-transition-property is the CSS properties we want to transition. You can narrow down which property you want to transition while leaving some properties alone.
-transition-timing-function can accelerate the transition process to happen linear over those ten seconds or change 90% of the way very quickly then last 10% take longer.
-transition delay once a change is set to occur it can delay it before actually happening by a few seconds or minutes. It makes the transition more noticeable.

Transitions-Duration and Transitions-Property

Duration is how long should the transition last.
Transition-duration: 1s;
Property is what property should be transitioned.
Transition-property: background;

Transitions-Timing-Function and Transitions-Delay

Delay is how long of a delay before the transition starts.
Transition-delay: 4s;
Transition-timing-function is what the acceleration curve for the transition.
Transition-timing-function: ease-in;

Shorthand is a way to write all the possible transitions in a single line of code.
Transition: background 1.5s ease-in 1;
Transition: property, duration, timing-function, delay;

Transitions Shorthand

Shorthand is a way to write all the possible transitions in a single line of code.
Transition: background 1.5s ease-in 1;
Transition: property, duration, timing-function, delay;