In this exercise, you will finally explore CSS animations (automatic) and transitions (triggered) to give your sandbox more interactivity. You will be required to add two of each. Examples/Help: Animation and Transition.
Video: In Class Demo and Files
1. Create 2 different CSS animations of your choice. In the CSS document, first give the div an animation-name and duration and then create an @keyframes rule with the name of the animation property. Do not use this example exactly, find or create a different one.
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
or
@keyframes example {
0% {background-color: red;}
60% {background-color: blue;}
100% {background-color: yellow;}
}
2. Create 2 different CSS transitions of your choice. In the CSS document, first give the div a transition property, value and duration, then tell it how you want it to change on hover. Do not use the example, find or create a different one.
Here is the proper syntax template with timing-function and delay being optional:
div {
transition: [property] [duration] [timing-function] [delay];
}
Example:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s ease 1s;
}
div:hover {
width: 300px;
}
3. Resources
Animation
Transitions