WDD 330 portfolio

Week 08

Notes

1. CSS transitions allow you to animate something that may typically happen immediately. You can customize how it is animated and for how long.


2. We first target the div in order to style it and give it a red color. When we target it again but use the :hover, it makes it transition to blue when the user hovers over it. The transition also has a clarification of 2s so that the transition happens over a span of 2 seconds.


3. Transitions are the grease in the wheel of CSS transforms. Without a transition, an element being transformed would change abruptly from one state to another. By applying a transition you can control the change, making it smooth and gradual.


4. There are two properties that are required in order for the transition to take effect:
   transition-property
   transition-duration


5. transforms = how to make an element change from one state to another.


6. Transforms are triggered when an element changes states, such as on mouse-hover or mouse-click.


7. NEVER FORGET TO SINCRONIZE CHANGES TO GITHUB!!!!

Questions

1. How did you do the page animations going from one screen to another with the pokiAPI demo you showed in class?

Code Examples

1. div {
   width: 100px;
   height: 100px;
   color: red;
   transition: color 2s;
   }
   div:hover {
   color: blue;
   }