Computer Science 318

Fundamentals of Web Design

Lab 16 Animations

Goal

Learn

Animation Properties

CSS Animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

.icon{
    animation-name:fade-in;
}

animation-name

Specifies the name of the @keyframes at-rule describing the animation’s keyframes.

.icon{
    animation-duration:3s;
}

animation-duration

Configures the length of time that an animation should take to complete one cycle.

.icon{
    animation-timing-function:linear;
}

animation-timing-function

Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.

Values for animation-timing-function:

.icon{
    animation-delay:.2s;
}

animation-delay

Configures the delay between the time the element is loaded and the beginning of the animation sequence.

.icon{
    animation-iteration-count:infinite;
}

animation-iteration-count

Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.

Values for animation-iteration-count:

.icon{
    animation-direction:alternate;
}

animation-direction

Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.

Values for animation-direction:

.icon{
    animation-fill-mode:forward;
}

animation-fill-mode

Configures what values are applied by the animation before and after it is executing.

Values for animation-fill-mode

.icon:hover{
    animation-play-state:paused;
}

animation-play-state

Lets you pause and resume the animation sequence.

Values for animation-play-state:

.icon{
    animation:fade-in 3s linear .2s infinite alternate forward;
}
.icon:hover{
    animation-play-state:pause;
}

animation

Can be used a shorthand for the properties above in this order: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. Commas are not need in between these values.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

Multiple animation can be applied to the same element, these are separated by commas.

Keyframes

@keyframes animations-name{
    from{
        left:0px;
        transform:rotateZ(0deg);
    }
    50%{
        left:50px;
    }
    to{
        left:100px;
        transform:rotateZ(90deg);
    }
}

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

In the example above there are three keyframes: from, 50%, and to.

At 0% the animation starts left at 0 pixels with no rotation. Then at 1 second or 50% of the animation it will be at 50 pixels from the left. Then at 100% of the animation or 2 seconds it will be at 100 pixels and rotate 90 degrees.

Though 50% doesn't have a rotation defined, if possible the keyframe will try to interpolate the value.

Transform

transform: scale(1.5) translate(2rem) rotate(10deg) skew(30deg, 180deg);

The transform CSS property lets you rotate, scale, skew, or translate an element. When applying multiple transforms to an element, multiple transform functions are place in one transform property.

Transform Functions

transform:scale()

transform:translate()

transform:rotate()

transform:skew()

Practice

Experiment Create keyframes that use the move animation to move the square from left 0 to left 100%. Then add a new declaration for hovering on the square that pauses the animation.

HTML

<div class="square"></div>

CSS

.square{ animation:move 1s ease-in-out infinite alternate; position:fixed; width:2rem; height:2rem; background-color:yellow; left:0; top:50%; } body{ background-color:black; }

Preview

Experiment Try adding the transform property to the logo with a rotation of 260deg, a scale of 4, and translateX of 10rem.

HTML

<div class="logo"></div>

CSS

.logo{ position:fixed; background-image:url(https://cs318.page/images/fe-icons/cs318.svg); background-size:contain; background-repeat:no-repeat; width:4rem; height:4rem; }

Preview

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab16

Create a new file called index.html in the lab16 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML

Change Document in the <title> element to "Mars Rovers"

In the <body> add a <header> and a <main>

In the <header> add a <nav>

In the <nav> add four <a>. Leave href blank for now. We will be adding ids to create jump links later.

In the <main> add two <section>

In first <section> add:

<div> with id of "stars"

<div> with id of "stars2"

<div> with id of "stars3"

<div> with class of "rover"

In the rover <div> add the image:

Rover

Add the planet image with a class of "planet" (not in the rover div, but after it.)

Planet

<div> with class of "mars"

In mars div add <h1> "The Mars Rovers"

Lab 15 html setup

In second <section> add:

<h2> with id of "overview"

Add id into href of Overview link in nav.

<hr>

<p>

<h3>

<p>

<h2> with id of "robots"

Add id into href of Robots link in nav.

hr

<div> with class of "robots"

<hr>

<h3>

Iframe below

<iframe src="https://mars.nasa.gov/gltf_embed/24584" width="800px" height="450px" frameborder="0"></iframe>

<div> with class of "grid"

<h2> with id of "timeline"

Add id into href of Timeline link in nav.

<hr>

<div> with class of "grid"

<h2> with id of "maps"

Add id into href of Maps link in nav.

<hr>

<div> with class of "maps"

Lab 16 section two content

CSS

body

background color #09021d margin 0 font color #fff font family

img

max-width 100%

header

background rgb(9,2,29)

background: linear-gradient(180deg, rgba(9,2,29,1) 0%, rgba(9,2,29,0) 100%);.
Hint: This will create a gradient background color

position fixed

width 100%

padding 1rem

Lab 16 header styles

header a

font color #fff

margin 1rem

header a:hover

font color #d15f44

Lab 16 navigation link styles

In HTML add class=headline to the first section

.headline

position relative
Hint: this will allow us to position all of the animation elements within the div based on the div's width and height

width: calc(100vw - 1rem);
Hint: VW- is viewwidths which is 1% of the viewport or browser's screen width

height 80vh
Hint: VH- is viewheights which is 1% of the viewport or browser's screen height

overflow:hidden;
Hint: this will hid any elements that move outside of the div

padding 0

.rover

width 20rem

height 20rem

position absolute

display block

bottom 10.5rem

left 10%

Lab 15 rover sizing

.planet

width 5rem

height 5rem

position absolute

left 30%

Lab 15 planet css

.mars

position absolute

width 100%

height 10.5rem

background color #913a25

border-top 1rem solid #d15f44

bottom 0

Lab 16 mars css

.rover:after

content:url(); for the image below

Dish

width 6rem

height 6rem

position absolute

left 2.25rem

top 1.6rem

Lab 16 dish setup

.mars h1

margin-left 5rem

font-size 3rem

font-weight 900

Lab 16 H1 CSS

.planet

animation: rise 10s ease-in 1 forwards;
Hint: We are calling this animation rise, it will take 10s, it will ease-in to the animation, and will only happen once, and the animation will keep the values set by the last keyframe after the animation is complete.

@keyframes rise{}

from

to

Lab 16 planet animation

.rover:after

z-index 1

transform-origin:center bottom;
Hint: This will move the point that the dish rotates on from the top left to center bottom

Add an animation with:

setup the keyframes for the animation you just defined

Lab 16 dish rotating animation

.rover

z-index 1.
Hint: this will move the rover in front of the planet

Setup an animation with keyframes that will move the rover like the image below.
Hint: The animation uses six of the animation properties (name, duration, timing-function, delay, interation-count, and direction), and two keyframes.

Lab 16 rover animation

.rover:hover

animation-play-state: paused;
Hint: this will make the rover stop if the cursor is hovering on it.

Download the following CSS file and add to lab 16 folder

In HTML add <link rel="stylesheet" href="stars.css">

Lab 16 stars css

header

With the new stars css you can no longer see the header. Add a z-index of 3

.mars

z-index 2

Lab 16 header z-index

section

padding 1rem

h2

color #d15f44

margin-top 5rem

Lab 16 h2 and section css

.robots

display grid

grid-template-columns 1fr 1fr 1fr

gap 2rem

In the HTML

In the robots div add a <figure> around each image (3 total figures)

In each <figure> add a <figcaption> after each <img> with the following content

Back to CSS

.robots figure

justify-self center

Lab 16 robots CSS

iframe

display block

margin 1rem auto 3rem

max-width 100%

Lab 16 iframe css

.grid

display grid

grid-template-columns 1fr 1rem 1fr
Hint: The goal of the grid is to create two text columns (the 1frs) with a line down the center (the 1rem). We are going move the hr with grid-area to take up the entire center column.

.grid hr

grid-area 1/2/10/3

Lab 16 grid hr css

.grid p

margin 1rem

.grid h3

margin 1rem

justify-self right

Lab 16 grid p and h3 css

Back in HTML

In the maps div add a <figure> around each image (2 total figures)

In each <figure> add a <figcaption> after each <img> with the following content

Back in CSS

.maps

display grid

grid-template-columns 1fr 1fr

gap 2rem

Lab 16 Map CSS

figcaption, h3

transition:color .2s ease-in-out;

.figcaption:hover, h3:hover

font color #d15f44

Lab 16 figcaption css

Add @media (min-width:600px)

section

padding 1rem 5rem

Lab 16 Finished

Adding your Own Animation!

Find an image you want to add to the animation

Add your image to the first section (headline)

Style your image (probably will need position, width, height, etc...) and add an animation for it. Note: the animation must be different than the animations and keyframes I provided above. You will probably use the same animation properties but use different values to create a new animation.

Animation Properties

Final Steps

Validate your HTML.

Lint your CSS at jigsaw.w3.org

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab16 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab16