Rutgers Design 2B: W4

CSS animations, SVGs and responsive design introduction and Valentine’s day cards :)

CSS Animations

CSS animations can liven up a page and call attention to relevant interactions. CSS animations are made of 2 components: Keyframes and Animation Properties.

Key Frames

If you’ve ever used After Effects or another animation program, you’ll remember that key frames show different stages of the animation. A simple animation might have a start and stopping point (2 keyframes), a more complex one might have several different stages.

Let’s create a document to work together on. Name it in our usual convention please…

index.html

<!DOCTYPE html>

<html>

<head>

<title>Animation Activity</title>

<link rel="stylesheet" type="text/css" href="assets/css/main.css">

</head>

<body>

<div class="container">

<div class="item">

Hello there!

</div>

</body>

</html>

and create a main.css file

body {

background-color: pink;

font-family: arial;

color: red;

font-size: 100px;

}

.container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

height: 100vh;

}

.item {

text-align: center;

}

The basic syntax of a keyframe animation is:

@keyframes animationTitle {

}

Let’s go ahead and create an animation called spinType. Within the keyframe’s curly brackets, you can set the times of each keyframe. Let’s make one at 0%, 60% and 100%:

@keyframes spinType {

0% {

}

60% {

}

100% {

}

I’d like to set up an animation where the text spins (hence the animation name). To do this we’ll use CSS transform properties. We’ll use rotate. Let’s add that to our animation…

@keyframes spinType {

0% {

transform: rotate(0.5turn);

}

60% {

transform: rotate(0.7turn);

}

100% {

transform: rotate(1turn);

}

This is saying: at 0%, rotate 50% of the way, at 60% rotate 70% of the way, and at 100% finish the turn. With just this in the CSS, nothing will happen. That’s because we need to put this keyframe animation to work and call it up….

Animation Properties

This puts the key frames to use. It tells which specific CSS element is being targeted, and in which way. To put the key frame to use, first use a CSS selector, and then call the animation. Here is a snippet that’s calling upon the div with the class “item”

You do this by using the property “animation”, calling your animation’s name, and then adding how long it takes to complete it.

div.item {

animation: spinType 2s;

}

The above uses CSS shorthand. That means, that I’m consolidating my code to a single line of code. This is always preferable as it’s less code than listing everything out on separate lines. If you wanted to see what that looks like, see the below snippet. Both are doing the exact same thing.

div.item {

animation-duration: 2s;

animation-name: spinType;

}

Here are some other fields you can use to finesse your animation. Again, you can do these all in one line or each on it’s own, but order matters.

This is the correct order:

animation: [animation-name] [animation-duration] [animation-timing-function]

[animation-delay] [animation-iteration-count] [animation-direction]

[animation-fill-mode] [animation-play-state];

For the animation to work properly, you have to follow the proper shorthand order (listed out above) as well as have AT LEAST the first two values. (name and duration).

animation-timing-function

Defines the pace of the animation. You can use any of these options:

ease – default value. Animation starts slow, accelerates, and then slows down

linear – animation has 1 speed from start to end

ease-in – animation has slow start

ease-out – animation has slow end

ease-in-out – animation has both a slow start and a slow end

you can also do more advanced timing functions with the cubic-bezier curve

animation-delay

Lets you decide when the animation will begin. For example, setting it to a positive value such as 1s, will begin the animation 1 second after it’s triggered. It won’t be doing anything before that time.

You can use seconds (s) or milliseconds (mil) to set this value.

animation-delay: 5s;

or, shorthand, which is what we’re aiming for:

animation: [animation-name] [animation-duration] [animation-timing-function]

[animation-delay];

animation: bounceIn 2s ease-in-out 3s;

animation-iteration-count

animation-iteration-count is how many times the animation runs. Options:

# (an integer, default is 1)

infinite the animation repeats indefinitely

initial sets the iteration count to the default value

inherit inherits the value from the parent

animation-direction

animation-direction species what direction the animation runs in. Options:

normal (default) animation plays forward.

reverse animation plays backwards.

alternate animation reverses every cycle: forwards, backwards

alternate-reverse the animation reverses directions every cycle: backwards, forwards

animation-fill-mode

animation-fill-mode species if the animation styles are visible before or after the animation plays. For example, if you increased the scale to 2, would this be visible before the animation starts? Or after it’s finished?

By default, the animation will not affect the styles of the element until the animation starts or after it completes. The animation-fill property overrides this with the following options:

backwards before the animation, the styles of the first keyframe (0%) are applied to the element

forwards after the animation is done, the styles in the last keyframe (100%) are visible

both – animation follows the rules for both forwards and backwards, extending the animation properties before and after the animation.

normal default (animation doesn’t apply any styles to the element before or after the animation)

animation-play-state

This property specifies if the animation is playing or paused. When you resume the animation after it pauses, the animation will pick up where it stopped. Values:

running – animation is playing

paused – animation is paused

References

https://daneden.github.io/animate.css/

animation | CSS-Tricks

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to

css-tricks.com

animation | CSS-Tricks • css-tricks.com

SVG

Let’s play around with some of these animations using an image rather than text. Go ahead and download this svg (scalable vector graphic) and save it in your images folder within this project directory.

Let’s go ahead and get rid of the previous text in our composition and add in the SVG.

SVG’s are awesome because you can edit them with code. You can create an SVG in Illustrator by creating a vector drawing, and then exporting it from File / Export / Export for screens. If you open up the SVG in a text editor, you’ll see the drawing generated with code. You can also use an SVG as a basic image with an image tag.

Example:

<div>

<img src="assets/imgs/yin-yang.svg">

</div>

if you want to use the svg as an image with the image tag, you can’t edit it as easily in the code. You’ll also need to set a height for the image in the css if you use it this way:

img {

height:500px;

}

Let’s use the actual code for this example instead. Open the SVG file in your text editor and copy the code and paste it into your body. It should look something like this…

<!DOCTYPE html>

<html>

<head>

<title>Animation Activity</title>

<link rel="stylesheet" type="text/css" href="assets/css/main.css">

</head>

<body>

<div class="container">

<div>

      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:#d2928b;}</style></defs><title>yin-yang</title><path class="cls-1" d="M337,609.25c10.48-51.08,44.58-95.11,94.05-112.62,49.21-17.41,103.15-15.08,152-33.85,79.83-30.66,128-115.65,123.74-199.57C702.2,172.28,633.36,106.06,545,93.1,315.1,59.34,100.05,258.49,90.84,483.47q-.34,8.26-.34,16.53c0,214.75,165.31,390.88,375.62,408.11C382.76,825.82,313.1,725.93,337,609.25ZM500,246a42.5,42.5,0,1,1-42.5,42.5A42.5,42.5,0,0,1,500,246Z"/><circle class="cls-1" cx="500" cy="711.5" r="42.5"/></svg>

</div>

</body>

</html>

you’ll notice the SVG has an ID, let’s change it to something more useful to us. I’m going to change it to svg id="yin-yang" data-name="yin-yang"

again, you’ll need to specify a height in the CSS for the SVG to show up. This time, you’ll target the svg rather than the img tag. You can also directly target the ID to be more specific.

#yin-yang {

height:500px;

}

Practice

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_2A5C20A1A732DB8776EFD2D1C8A2F323A925A87D460368F8858039F7ED4F71F1_1550107364873_Screenflick+Movie+33.gif

Let’s create an animation where the yin yang is rotating indefinitely and it slows down as it comes to a completion. (First, you’ll need to set up your keyframes (we’ll just need two, 0 and 100%) and then you’ll need to call it up in our #yin-yang entry. Let’s set the animation to take 5 seconds.)

Once we have it working, let’s delay the animation by 2s. Meaning, once we land on the page, it’ll wait two seconds before the animation runs.

Now let’s create a hover state where the animation pauses when you hover.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_2A5C20A1A732DB8776EFD2D1C8A2F323A925A87D460368F8858039F7ED4F71F1_1550107423503_Screenflick+Movie+34.gif

Cool, let’s add another animation to our shape. Let’s animate the fill color to #6d79cd Can you figure out how to do this?

Hint: take a look at the HTML code for the SVG to figure out what to target.

Another hint: You’ll have to create another keyframe animation.

Let’s add a second animation to the fill. Let’s animate the opacity to get a magical looking quality to the animation. Can you figure out how to do this? Hint: You can do a second animation by separating it with a comma.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_2A5C20A1A732DB8776EFD2D1C8A2F323A925A87D460368F8858039F7ED4F71F1_1550107839926_magic.gif

About prefixes (AKA webkit animation fields)

As you work on more of these animations, you might come across the “-webkit-animation” prefix. This is a fallback so that animations work properly across all browsers. It’s a good idea to include them, though for this class, we’re only using chrome and I’m not too worried about cross-browser support.

Activity – Abstracted Vday Cards

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://media.giphy.com/media/UiYQpmlcJ3JZe/giphy.gif

Since it was Valentine’s Day, let’s have a little seasonal fun! Using basic visual elements, let’s try to create some interesting compositions using CSS animations, shapes, SVGs, photos, text or any combination of these. I’d try to be a bit less literal with this assignment, and use the concept of Valentine’s Day as a jumping off point.

Try to explore formal design principles including the gestalt ideas: proximity, similarity, continuity, closure, figure/ground and formal art principles including line, shape, form, color, value, space, texture, unity, contrast, balance, movement, rhythm, pattern and emphasis!

Also note: I used an SVG in this example. You can also draw simply with code here is a great reference to start with:

The Shapes of CSS | CSS-Tricks

CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you

css-tricks.com

The Shapes of CSS | CSS-Tricks • css-tricks.com

additionally, you can see how creative people have gotten with JUST the code, here are some more ideas:

https://pattle.github.io/simpsons-in-css/

A Beginner’s Guide to Pure CSS Images

What you’re getting into: 17 min read. A detailed explanation of how to creating pure CSS images. We will start with an overview and work…

medium.com

A Beginner’s Guide to Pure CSS Images • medium.com

I’d also like you to include a favicon that extends your idea to the browser window.

Accessible Colors (especially for type)

Another thing to keep in mind is how accessible your colors are. Not everyone can see the same color combinations equally, additionally, screens display colors differently. There are two rating systems for accessibility – AA and AAA – that evaluate the contrast of your color combinations. Typically, most websites will pass AA but ones that should be accessible to absolutely everyone need to be AAA compliant. This is also another system that can help you create color combinations that are simply more legible and successful.

Here is a tool to help you test out your color combos: http://accessible-colors.com/

Z index

If you have overlapping items, you can use the z-index property to change the order in which they appear.

Here is a guide and another guide to using the z-index, but in general, you can order them with a number (positive or negative). An element with greater z-index is always in front of an element with a lower stack order.

.item-1 {

z-index: 1;

}

.item-2 {

z-index: 2;

}

in this example, item-2 is in front of the first item.

A few references, both historic and contemporary

Interaction of Color – Josef Albers

Helen Frankenthaler

Ellsworth Kelly

Mary Hellman