​​Penn Week 7 – Animations & Small Group Meetings

​​Recently Seen Online

​​
 
FUTUREMOOD AURA SUNGLASSES
Sunglasses proven to alter your state of mind. Powered by new Halochrome Lenses that are scientifically tested and proven to alter your mood.
FUTUREMOOD AURA SUNGLASSES •
​​
​​
 
NONTEMPORARY
www.nontemporary.com
NONTEMPORARY • www.nontemporary.com
​​
​​
 
Sticky Glass
A New York based design company developed by Grace Whiteside that specializes in multi-functional, performative and collaborative glasswork. All of our glass is hand-blown and often made to order in Brooklyn, NY.
stickyglass.com
Sticky Glass • stickyglass.com
​​
​​http://lebassis.com/
​​

​​Look At Hover Activity

​​Link →
​​
​​

​​CSS Animation Workshop

​​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. You can use the below to help get you started.
​​
​​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>
​​  </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;
​​}