Animation and Flexboxes CS 0134 (term 2181) Jarrett Billingsley

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 0134 term 2181

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 0134 term 2181

: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 0134 term 2181

Transforms 10/2/2017 CS 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

Timelines and keyframes in CSS To make a timeline, you use the @keyframes 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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

…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 0134 term 2181

Lab part a 10/2/2017 CS 0134 term 2181

Flexboxes 10/2/2017 CS 0134 term 2181

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 0134 term 2181

💪🎁 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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

Lab part b 10/2/2017 CS 0134 term 2181