You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
2.2 KiB
84 lines
2.2 KiB
# CSS - Motion
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Explain the roles in traditional animation and how they apply to computer animation
|
|
1. Create basic transitions between a start and end state in CSS
|
|
1. Write complex animations with multiple states
|
|
|
|
|
|
## Explain the roles in traditional animation and how they apply to computer animation
|
|
|
|
1. In traditional (hand-drawn) animation, there were two kinds of animators
|
|
- Keyframe artist
|
|
- Draws the main frames for the animation
|
|
- Inbetweener (tweener)
|
|
- Fills in the frames between each keyframe so it looks fluid
|
|
1. In computer animation, we act as the keyframe artist, and the computer is the tweener.
|
|
|
|
## Create basic transitions between a start and end state in CSS
|
|
|
|
Define a start state and an end state
|
|
|
|
```css
|
|
a {
|
|
background:yellow; /* start state */
|
|
}
|
|
a:hover {
|
|
background:green; /* end state */
|
|
}
|
|
```
|
|
|
|
Three main properties:
|
|
|
|
- `transition-property: background, left, top, height;`
|
|
- `transition-duration: 0.5s;`
|
|
- `transition-timing-function: ease;`
|
|
- ease
|
|
- linear
|
|
- ease-in
|
|
- ease-out
|
|
- ease-in-out
|
|
- cubic-bezier(n,n,n,n)
|
|
- `transition-delay: 1s;`
|
|
|
|
Shorthand
|
|
- `transition: <property> <duration> <timing-function> <delay>`
|
|
|
|
## Write complex animations with multiple states
|
|
|
|
Transitions are great for going from one state to another, but sometimes you need more than a start and end state. To do this, there are two steps
|
|
|
|
1. Create a named animation with a set of keyframes.
|
|
```css
|
|
@keyframes example {
|
|
0% {background-color:red; left:0px; top:0px;}
|
|
25% {background-color:yellow; left:200px; top:0px;}
|
|
50% {background-color:blue; left:200px; top:200px;}
|
|
75% {background-color:green; left:0px; top:200px;}
|
|
100% {background-color:red; left:0px; top:0px;}
|
|
}
|
|
```
|
|
|
|
1. Assign the animation to a rule and give it a duration
|
|
```css
|
|
div {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
position: relative;
|
|
animation-name: example;
|
|
animation-duration: 4s;
|
|
}
|
|
```
|
|
1. Additional properties
|
|
- animation-timing-function
|
|
- animation-iteration-count (can be set to infinite)
|
|
- animation-direction
|
|
- reverse
|
|
- alternate
|
|
- animation-delay
|
|
- animation-play-state
|
|
- paused
|
|
- running
|