​​Week 4
​​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>
​​  </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 {
​​}