1. Animation and Flexboxes
CS 0134 (term 2181)
Jarrett Billingsley

2. Class announcements Sorry for the limited material last time…
Don't use Internet Explorer, if you can help it. (it's bad.)
Exam:
Written: 2-3 sides of paper, multiple choice, vocab.
Practical: you will make a site about yourself, from scratch.
If you already did that, pick another topic 
Will use many/most of the concepts up to/including today
10/2/2017
CS term 2181

3. The web moves fast. When the book was written in 2015…
The transition and animation stuff from today was experimental.
Now it's pretty much standard.
So don't worry about the -webkit-animation or whatever.
Try the caniuse.com site to check if you're not sure!
10/2/2017
CS term 2181

4. :hover is universal, actually
In CSS, you can put :hover on any selector, not just a:hover.
You can change almost any CSS property inside the :hover rule.
We could change the background color, the border, and the size.
When the user puts their mouse over it, the :hover is activated. When they move the mouse away, it's deactivated!
But :hover isn't all great…
How do you hover on a phone?
How do people without mice hover?
Restrict :hover to fancy effects. Don't hide info behind it.
10/2/2017
CS term 2181

5. Transforms
10/2/2017
CS term 2181

6. More than meets the eye
Being stuck to a boxy grid is boring. Transforms let you…
Turn things to any angle
Move things around
Stretch and squash things
Do.. whatever this is
10/2/2017
CS term 2181

7. Stretching things with scale()
Changing the size of something is called scaling it.
You can change the scale of something with the CSS property:
transform: scale(1.5);
You can stretch it by giving two values, horizontal and vertical:
transform: scale(1.5, 0.5);
Let's make the pictures get bigger when hovered!
2 is double size.
0.5 is half size.
A scale of 1 is normal size.
10/2/2017
CS term 2181

8. Turning things with rotate()
Rotations are given in degrees (360 in a circle).
You can rotate something with (don't forget the deg unit!):
transform: rotate(45deg);
If you want to scale and rotate, put them in the same transform:
transform: scale(1.2) rotate(-4deg);
-45º tilts it left.
45º tilts it right.
0º is right side up.
10/2/2017
CS term 2181

9. Moving things with translate()
The two values are the horizontal and vertical distance to move.
When you translate something, it will go over top of the page.
It's done with translate() (and don't forget the length units):
transform: translate(-10em, 3em);
Negative values move left and up.
Positive values move right and down.
10/2/2017
CS term 2181

10. Transitions and Animations
10/2/2017
CS term 2181

11. transition: all 0.5s ease;
A little too snappy
When you hover over something, it changes instantly. Ew.
A transition says "when things change, do it gradually instead."
You put the transition property on the default style, not the hover.
transition: all 0.5s ease;
What CSS properties should be affected. "all" is a good default.
The "timing function." See "AnimDemo" on the course page!
How long it'll take, in seconds.
10/2/2017
CS term 2181

12. More complex animation
Maybe we want a complicated, multiple-step animation.
Like a ball bouncing in,
and a dog comes in to pick it up,
and the dog phases out of existence.
You know, like dogs usually do.
10/2/2017
CS term 2181

13. Timelines
Animation happens over time, so it's useful to put it on a timeline. 0%
The beginning of the timeline is at 0%.
50%
The end is at 100%.
100%
So 50% is exactly in the middle.
10/2/2017
CS term 2181

14. Keyframes
Instead of having to come up every single position, we just come up with the most important frames: the keyframes.
Then we can let the browser fill in the middle frames. 0%
50%
100%
10/2/2017
CS term 2181

15. Timelines and keyframes in CSS
To make a timeline, you use name structure.
This comes outside of any other rules.
Then inside that, you put the keyframes.
Let's try to move something back and forth.
@keyframes back_and_forth {
0% { transform: none; }
50% { transform: translate(5em, 0em); }
100% { transform: none; } }
10/2/2017
CS term 2181

16. You can… put as many keyframes inside as you want.
Want 100 frames? No problem.
put as many CSS properties in each keyframe as you want.
Change the transform, the color, the text size, etc etc etc.
not everything can be animated though. But many things can.
name the animation whatever you want.
…as long as there are no spaces. Use _ underscore instead.
10/2/2017
CS term 2181

17. Now this is the name of the animation (timeline) to use!
Making something move!
You have to put the animation on something to make it work.
(you can use the same animation as many times as you want!)
The CSS property for this looks pretty similar to transitions:
animation: back_and_forth 1s ease;
Now this is the name of the animation (timeline) to use!
10/2/2017
CS term 2181

18. …making something KEEP moving!
You can repeat animations any number of times, or infinitely!
You use animation-iteration-count for this:
animation-iteration-count: 3;
animation-iteration-count: infinite;
10/2/2017
CS term 2181

19. Lab part a
10/2/2017
CS term 2181

20. Flexboxes
10/2/2017
CS term 2181

21. A side bar with… <aside>
What if we wanted to put the navigation on the left? Maybe with some other stuff, like images.
This is a perfect use for the <aside> tag.
For the page on the right, I might do…
<header></header>
<div>
<aside><nav></nav></aside>
<main></main>
</div>
<footer></footer>
header
navigation
main
footer
This div is here for a reason…
10/2/2017
CS term 2181

22. 💪🎁 What did we use before to put something on the side?
Flexboxes can go vertical, too!
What did we use before to put something on the side?
Floats kinda work for this, but it's really awkward.
Flexboxes are a much better alternative.
There are two parts: the container, and the children.
The container can be anything, and decides how its children are laid out.
The children are blocks inside the container.
10/2/2017
CS term 2181

23. This can be wrap, nowrap, or wrap-reverse. The default is nowrap.
The CSS for flexboxes
The container can be anything – a <div>, or <main>, or <section>, or whatever! I'd recommend using a class or ID for it though.
On the container, you need the following CSS rules:
display: flex;
flex-flow: row nowrap;
This can be row, row-reverse, column, or column-reverse. The default is row.
This can be wrap, nowrap, or wrap-reverse. The default is nowrap.
The flexbox reference linked from the course page is really great!
10/2/2017
CS term 2181

24. Aligning, justifying, centering
For row layouts:
Justifying means controlling the left-to-right position and spacing of items. It's just like left, center, right, justify on text.
Aligning means controlling the up-and-down position of items.
For column layouts, they're swapped. (Justifying is up-and-down, aligning is left-to-right.)
I defer to the flexbox guide's great illustrations for this :D
10/2/2017
CS term 2181

25. The future: grids Header Main Nav Footer Logo
Flexboxes are good for now, but…
The next big thing for site layouts will be grids.
They're like… 2-D flexboxes.
Right now it's experimental, but that was flexboxes two years ago!
If you stick with web design, maybe you'll want to play around with these soon.
Logo
Header
Main
Nav
Footer
10/2/2017
CS term 2181

26. Lab part b
10/2/2017
CS term 2181