---
tags: COMP-1850
---
<style>
.markdown-body h1:first-of-type {
margin-top: 24px;
}
.markdown-body h1 {
margin-top: 64px;
}
.markdown-body h1 + h2 {
margin-top: 32px;
}
.markdown-body h2 {
margin-top: 48px;
}
.markdown-body h3 {
color: cornflowerblue;
}
.exercise {
font-size: 150%;
font-weight: bold;
color: rgb(227,112,183);
}
.note {
color: red;
}
</style>

## CSS Animations

Unlike CSS Transitions, which define a change from one property value to another, CSS Animations allow us to define _multiple_ property values using ==keyframes== and a handful of animation-related properties. A keyframes ==at-rule== is simply a sequence of steps that define values over time, and can be written in several ways:

/* using keywords 'from' and 'to', equivalent to a CSS transition */
@keyframes exampleAnimationName {
    from { 
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

/* using percentages and defining multiple values */
@keyframes exampleAnimationName {
    0% { 
        background-color: red;
    }
    25% {
        background-color: blue;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: yellow;
    }
}

<style>
#animation1 {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: red;
animation: a1 5s linear 0s infinite alternate;
}
@keyframes a1 {
0% {
background-color: red;
}
25% {
background-color: blue;
}
50% {
background-color: green;
}
100% {
background-color: goldenrod;
}
}
</style>
<div id="animation1"></div>

---

## Optional Reading Before Next Class

- Introduction to [SASS](https://sass-lang.com/guide/) (a CSS pre-processor)

## Tasks To Complete Before Next Class

- [ ] Install [NodeJS](https://nodejs.org/)
- [ ] Sign up for a [Github Account](https://github.com/signup)
- [ ] (Optionally) complete the [readings](#Optional-Reading-Before-Next-Class)

---