HOVER OVER ANY LIGHT GRAY CONTAINER TO SEE ANIMATION...
...EXPLANATION WILL POP UP AFTER THE ANIMATION FINISHES.
#1
Golf Ball
Transition margin left with no delay, margin top with a delay - ball changes to black on delay.
#2
Newton's Cradle
Transition margin left on ball 1, stationary balls 2-4, transition margin left ball 5 on delay.
#3
Deck of Cards
Transition margin left on each card on a delay, with z-index increasing for each.
#4
Cannonball
Combining transform-origin, transform.rotate(), and margin top adjustment to create arc.
#5
Traffic Light
Modifying opacity on each light on respective delays.
#6
Rainbow
Transform-origin value and transform.rotate() for each color - couldn't get streak to work.
#7
Pool Balls Break
Transition margin left and top at varying transition times to give realistic effect.
#8
Pool Ball Rolling
Radial-gradient to make ball look real - adjust margin left to move ball - transform.rotate() to roll.
6
#9
Box Resize
Simple changing of the width to resize.
#10
Cookie Monster
Transform.rotate() the eyes - adjusted border radius on each corner of mouth to open it.
#11
Door Opening
Transform.perspective() and rotateY() adjustment opens door - transform.rotate() turns doorknob.
#12
Pages Turning
RotateY() from 0 to -180 degrees while also changing z-index to have the pages properly stack.
#13
Color Fade
Simple changing of the background-color with transition fade.
#14
Shape-Shifter
Adjust the border-radius to 50% with transition fade.
#15
Bouncing Ball
Alternate between translateY() of 0 and negatives at different keyframe states - ease-in and -out alternating as well.
#16
Circle Appear
Simple increasing of width and height on transition fade.
#17
Snowball
Gradient colors to give snowball "realistic" texture - scaling up size while moving to right - transform.rotate() to roll.
#18
Reverse Rotation
Two circles using transform.rotate() positive and negative values to move counter to one another.
#19
Lottery Scratcher
Two divs stacked on top of each other with a change in opacity to the top div.
YOU'RE A WINNER!
#20
Bar Graph
Adjusting height of bars at different intervals to give a more visually appealing effect.
#21
Cycle Colors
No keyfames for this transition - layered divs with changing opacities.
#22
Text Zoom
Keyframes transform.scale() to make it zoom off screen.
 WELCOME TO THE WORLD WIDE WEBZZZ!!!!
#23
Push Button
Adjust top, bottom, and box shadow margins on hover and active states.
PUSH ME!
#24
Pulsing Balls
Utilize transform.scale() and transition timers.
#25
Squish Ball
Adjust left, top margin percentages and height, width percentages to flatten out circle.
#26
Outside-In Filling
Gradually increase the inset box shadow width and spread.
#27
Topple Over
Transform.rotate() to make object fall over - transform origin bottom right.
#28
Top-Bottom Swap
Keyframe at 50% adjust margin left and downgrade z-index
#29
Floating Ball
Increase y axis in transform.translate() at 50% - run infinite.
#30
Wobble Wobble
Switch between positive and negative skew at different keyframe states.