Hover Animations
The point of the page hover animations was to draw attention to links on hover.
Some of the techniques I used were keyframes to shake the navigation link on hover. I used pseudo-selectors to make things pop out and into the navigations links. I used scale to skrink and enlarge a link. I also used a radial graident and opacity to produce a shadow.
Transitions
In this lab we were tasked with using transitions to highlight the fact that the product was on sale 15%.
I used the pseudo-selector to make a line under the price then moved it to be in the middle of the price and used a keyframes to extend it over the sale price simulating a strikethrough. Then I used scale to make the sale price text bigger.
Easing Functions
This page demonstrated the common easing functions.
There are 4 common easing functions. I made 4 boxes and made each of them have a different easing, and made them move to the center of the page. They all get to the center at the same time but there movements are at different speeds.
Transform Animations
The Objective was to demonstrate a concept (Ex. such as a balloon exapanding due to gas heating inside it.)
My concept was a box getting smashed by a press. I used keyframes to transform scale the the box as the smasher came down on top of it so it simulated getting smashed.
Keyframes & Transforms
The objective here was to use keyframes, transitions, and transforms.
I made small resume with links to examples from many classes I have taken. I used transform, translate and keyframes to have my name drop in from off the screen. Then some of the headers got skewed and scaled with transform. The links all have a hover effect that underlines the box, changes the background color and adds a box shadow.