Animations

CSS Animations In Class Practice

• CSS Animation

CSS Animation W3Schools Tutorials

• @Keyframes


• Animation-Delay


• Animation-Delay Negative


• Animation-Direction Alternate


• Animation-Direction Alternate-Reverse


• Animation-Direction Normal


• Animation-Direction Reverse


• Animation-Duration


• Animation-Duration 2


• Animation-Fill-Mode Backwards


• Animation-Fill-Mode Both


• Animation-Fill-Mode Forwards


• Animation-Fill-Mode None


• Animation-Iteration Count


• Animation-Iteration Infinite


• Animation-Play-State Hover


• Animation-Play-State Inherit


• Animation-Play-State Initial


• Animation-Play-State Pause


• Animation-Play-State Running


• Animation-Timing-Function


• Animation Test 1


• Animation Test 2


• Animation Test 3


• Animation Test 4


• Animation Test 5


• Animation Test 6

CSS Animation Samples

• Animation Hover


• Mario Kart Animation


• Basket Animation


• Pop-Up Animation


• Rotation Panels Animation

Resources

CSS Animation W3Schools Tutorials

CSS Animation Introduction

CSS Animation Tutorials

Reflection Statement

What I Knew

When creating CSS Animations, I used keyframes, animation-name to link to the keyframe, animation-direction, animation-delay, animation-fill-mode, animation-iteration, animation-timing-function, animation-play-state, and animation-duration

What I Learned

In this learning plan, I learned how to code css animations by using the mario and luigi images. I used the keyframes for the motion of the karts. I thought this was really fun to learn. You can create animations not as gif, but with code as well.

What I Still Want to Study

I still want to study how animation was thought of for adding onto a web page?