Lab 16 Animations
Goal
- Learn animation properties and keyframe setup
- Learn transform property
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:
- keyword values: ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end
- cubic-bezier curve
.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:
- keyword value: infinite
- number values: 1, 3, 3.5, etc...
.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:
- normal
- reverse - The animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed.
- alternate - The animation reverses direction each cycle, with the first iteration being played forwards. The count to determine if a cycle is even or odd starts at one.
- alternate-reverse - The animation reverses direction each cycle, with the first iteration being played backwards. The count to determine if a cycle is even or odd starts at one.
.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
- none
- forwards - The target will retain the computed values set by the last keyframe encountered during execution.
- backwards - The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
- both - The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.
.icon:hover{
animation-play-state:paused;
}animation-play-state
Lets you pause and resume the animation sequence.
Values for animation-play-state:
- running - The animation is currently playing.
- paused - The animation is currently paused.
.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.
- From has a default of 0%
- To has a default of 100%
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()
- Scales an element up or down on the 2D plane.
- X, Y or Z can be add after scale to specify a change on that particular axis
- A number or percentage can be used as the value. 1 = 100%
transform:translate()
- Translates an element on the 2D plane.
- X, Y or Z can be add after scale to specify a change on that particular axis
- Values can use percentage, pixel, rem, or em.
transform:rotate()
- Rotates an element around a fixed point on the 2D plane.
- X, Y or Z can be add after scale to specify a change on that particular axis
- Uses the unit deg for the value
transform:skew()
- Skews an element on the 2D plane.
- X or Y can be add after scale to specify a change on that particular axis
- Values can used deg or rad for unit
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
CSS
Preview
Experiment Try adding the transform property to the logo with a rotation of 260deg, a scale of 4, and translateX of 10rem.
HTML
CSS
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.
- Check to see if it says Pull Origin. If it does, click Pull Origin. Why? A pull occurs if you or a collaborator made a change to the repository and pushed the changes. ALWAYS MAKE SURE TO PULL BEFORE CODING!
- If the computers were wiped you made need to reclone your repository to the computer.
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.
- Overview
- Robots
- Timeline
- Maps
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:
Add the planet image with a class of "planet" (not in the rover div, but after it.)
<div> with class of "mars"
In mars div add <h1> "The Mars Rovers"
In second <section> add:
<h2> with id of "overview"
- Mars Rover
<hr>
<p>
- A Mars rover is a motor vehicle designed to travel on the surface of Mars. Rovers have several advantages over stationary landers: they examine more territory, they can be directed to interesting features, they can place themselves in sunny positions to weather winter months, and they can advance the knowledge of how to perform very remote robotic vehicle control.
<h3>
- Science
<p>
- The big science question for the Mars Exploration Rovers is how past water activity on Mars has influenced the red planet's environment over time. While there is no liquid water on the surface of Mars today, the record of past water activity on Mars can be found in the rocks, minerals, and geologic landforms, particularly in those that can only form in the presence of water. That's why the rovers are specially equipped with tools to study a diverse collection of rocks and soils that may hold clues to past water activity on Mars.
<h2> with id of "robots"
- The Robots
hr
<div> with class of "robots"
<hr>
<h3>
- Rover Parts
Iframe below
<iframe src="https://mars.nasa.gov/gltf_embed/24584" width="800px" height="450px" frameborder="0"></iframe> <div> with class of "grid"
- hr
- h3
- Body
- p
- a structure that protects the rovers' "vital organs"
- h3
- Brain
- p
- computers to process information
- h3
- Temperature Controls
- p
- internal heaters, a layer of insulation, and more
- h3
- Neck and Head
- p
- a mast for the cameras to give the rovers a human-scale view
- h3
- Eyes and Other Senses
- p
- cameras and instruments that give the rovers information about their environment
- h3
- Arm
- p
- a way to extend its reach
- h3
- Wheels and Legs
- p
- parts for mobility
- h3
- Energy
- p
- batteries and solar panels
- h3
- Communications
- p
- antennas for "speaking" and "listening"
<h2> with id of "timeline"
- Mission Timeline
<hr>
<div> with class of "grid"
- hr
- h3
- Prelaunch Activities
- p
- Preparation for the mission, including landing site selection, assembly and testing, and delivery to Cape Canaveral
- h3
- Launch
- p
- Lift-off from Earth
- h3
- Cruise
- p
- Voyage through space
- h3
- Approach
- p
- Nearing the red planet Mars
- h3
- Entry, Descent, and Landing
- p
- Journey through the martian atmosphere to the surface
- h3
- Rover Egress
- p
- Leaving the lander to begin exploration
- h3
- Surface Operations
- p
- Learning about Mars through the day-to-day activities of the rovers
<h2> with id of "maps"
- Maps
<hr>
<div> with class of "maps"
CSS
body
background color #09021d
margin 0
font color #fff
font family
- Go to fonts.google.com and search for Roboto
- Select Regular 400 and Black 900
- Copy HTML link tags provided and paste into the
<head> - set font family for body in the css to
'Roboto Mono', monospace
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
header a
font color #fff
margin 1rem
header a:hover
font color #d15f44
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%
.planet
width 5rem
height 5rem
position absolute
left 30%
.mars
position absolute
width 100%
height 10.5rem
background color #913a25
border-top 1rem solid #d15f44
bottom 0
.rover:after
content:url(); for the image below
width 6rem
height 6rem
position absolute
left 2.25rem
top 1.6rem
.mars h1
margin-left 5rem
font-size 3rem
font-weight 900
.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
- bottom 0
- transform - rotate(0) scale(1)
to
- bottom 75%
- transform - rotate(180deg) scale(2)
.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:
- name of rotate
- duration of 2 seconds
- a linear timing function
- continues forever
- and alternates back and forth
setup the keyframes for the animation you just defined
- from - transform rotate(-5deg)
- to - transform rotate(-33deg)
.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.
.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">
header
With the new stars css you can no longer see the header. Add a z-index of 3
.mars
z-index 2
section
padding 1rem
h2
color #d15f44
margin-top 5rem
.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
- Mars 2020
- Curiosity Rover
- Helicopter Tech Demo
Back to CSS
.robots figure
justify-self center
iframe
display block
margin 1rem auto 3rem
max-width 100%
.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
.grid p
margin 1rem
.grid h3
margin 1rem
justify-self right
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
- Spirit's Journey
- Opportunity's Journey
Back in CSS
.maps
display grid
grid-template-columns 1fr 1fr
gap 2rem
figcaption, h3
transition:color .2s ease-in-out;
.figcaption:hover, h3:hover
font color #d15f44
Add @media (min-width:600px)
section
padding 1rem 5rem
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
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-direction
- animation-fill-mode
- animation-play-state
Final Steps
Validate your HTML.
- Navigate to W3C Validator
- Select the validate by file upload tab at the top of the page
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.
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.
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"
Your are Done with Lab16