CSS Animation
Hover over parts of the grumpy cat!
In CSS we can create animations! In general, animation is the simulation of movement created by displaying a series of pictures, or frames. Creating animations in CSS is pretty simple, and you can even create animals and simulate movements like this Grumpy Cat I made!
There are two types of CSS animations you can utilize. One is called CSS Keyframe Animations and the other is CSS Transitions. I will go over how I used CSS Keyframe Animations first.
Now lets look at some code from Grumpy Cat!
Keyframe animations are used to specifically change the starting and ending of an animation. You can use % like I did OR you can use from{ } and to{ }.
Step 1: The element (.eye) you want to animate gets an animation property. To explain your animation property you must name it, tell how many seconds it will be, and choose animation keywords like: infinite, ease-in, ease-out, ect..
Step 2: We can see that you must use the @keyframe ______ and then add your animation name. For this example, I named my keyframe blink because the eyes are slowly blinking. In this case, as the keyframe is occuring the height of the eyelid is increasing slowly until 97.5% at it's peak and then its height going back to 0 again at 100%, once the blink cycle is complete.
CSS tranisitions are used to control the speed of an animation and allow changes to happen on :hover. I have used CSS transitions for all the h1's on this page! Hover over them to see a change in color and font overtime. To make your own CSS transitions, follow these steps below.
Step 1: Choose what element you want to "animate". For this example I have chosen .nose -then, you put your transition property - transition: 1.5s ease-out; in your chosen element. For the transition property, you must specify the property, duration, timing-function, and delay if applicable. (You really only need duration and timing-function).
Step 2: Create a new :hover state for your element. This will be where you add values you want to transition to.
You're done! Hover over your element to see how it changes over time!
