Week 14: CSS Animations: Keyframes and Advanced CSS: Layout with Flex-box

This week focus was on CSS Animations: Keyframes and Advanced CSS: Layout with Flexbox from Colt Steele The Advanced Web Developer Bootcamp.

 -Introduction to Keyframes   
 -Other CSS Animation Properties 
 -CSS Animation Shorthand
 -Introduction to Flex-box
 -The Magic of Display: Flex 
 -Flex-Direction
 -Flex-Wrap
 -Justify-Content
 -Align-Items
 -Align-Content
 -Align-Self
 -Order
 -Flex-Grow
 -Flex-Shrink

Introduction to Keyframes

Keyframes are another tool within CSS animations, unlike transitions they allow us to build much more complex multicomponent multi-state animations. They also allow us a lot more control over the details of how the animation works. Things like
Timing – when it start, how many times it should repeat, how long it should last.
Keyframes compared to transitions
Transitions allow us to animate a single state change
From A to B which is a start and an end.
Keyframes allow for much more complex multi-state animations
From A to B to C to D to E to F and so forth as many as we may need.
Keyframes include a lot of in between information.

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

Other CSS Animation Properties

Other CSS Animation Properties
Most common animation properties
Animation-name
Animation-duration
Animation-timing-function
Less common animation properties
Animation-iteration-count is how many times should it repeat
Animation-fill-mode is how an animation should apply styles before and after the animation
Animation-direction is the way an animation moves across a specific area
Animation-play-state is whether an animation is running or paused

CSS Animation Shorthand

CSS shorthand combines all CSS animations to be written in a single line of code.

animation: 3s ease-in 1s 2 reverse both paused slide-in; 

Introduction to Flex-box

Flex-box is a way to layout content on a web page.
There are two types of properties Container and Flex Items
A container is what contains the items inside. It is the outside layer.
A flex item is what controls the spacing of the items inside the container.

Container Properties

    -flex-direction
    -justify-content
    -flex-wrap
    -align-items
    -align-content

Flex Items

    -order
    -flex
   -flex-grow
   -flex-shrink
   -align-self

The Magic of Display: Flex

This is without flex-box
To being using flex-box it is important to set the display to flex

.container {
Display: flex; 
}

This is with flex-box

Important Flexbox Terminology

Flex-item is inside
Container is outside
Main goes left to right
Cross is top to bottom

Flex-direction

Flex-direction specifies how items are placed in the flex container, defining the main axis and its direction.
The default setting is

flex-direction: row; 

Flex-direction row-reverse
To change main axis direction use reverse.

Flex-direction: row-reverse; 

Flex-direction column
Changes the main axis to start from the top and then go downwards

flex-direction: column;

-Flex-Wrap
-Justify-Content
-Align-Items
-Align-Content
-Align-Self
-Order
-Flex-basis
-Flex-grow
-Flex-shrink

The Magic of Display: Flex

Pseudo-Classes focus

input:focus {
color: red; 
}

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

<input type=”text” /> 

Important Flex-box Terminology

Active triggers when an element is being activated by user

Flex-direction

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

Flex-Wrap

Flex-wrap specifies whether items are forced into a single line or can be wrapped into multiple lines.
Can be used to make boxes larger.

There is a cross axis and there is a main axis understanding how each work will help understand how to lay content out on a web page.

Justify-Content

Defines how space is distributed between items in flex container along the main axis

The order of the items in not changed, so it is not the same as flex-direction. The white space is now on the left side instead of the right side.

.container {
justify-content: space-around;

Align-Items

align-items defines how space is distributed between items in flex container
Along the cross axis

Flex-start will move the items at the top of the page.

Flex-end will move the items to the bottom

Flex-stretch will take up the entire container.

Flex-center will center them vertically

Align-Content

Align-content defines how space is distributes between rows in
flex container along the cross axis

Align-Self

Order

Order specifies the order used to lay out items in their flex container

By default all items have an order of 0

Flex-basis

Flex defines how a flex item will grow or shrink to fit the available space in a container.

flex is shorthand for
flex-grow, flex-shrink, and flex-basis

flex-basis is sort of like width, but not.
specifies the ideal size of a flex item before it's placed into a flex container.

flex-basis is the starting condition.

Flex-grow

flex-grow dictates how the unused space should be spread amongst flex items. Its all about ratios!

Flex-shrink

flex-shrink dictates how items should shrink when there isn't enough space in container.