---
# System prepended metadata

title: COMP 1850 Lesson Eleven
tags: [COMP-1850]

---

---
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:

```css
/* 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)


---
