Take these declarations in our nav figure ruleset:
animation-name: crazyShark;animation-duration: 1s;animation-timing-function: ease;
Remove -name from animation-name and the bottom two declarations; so we are left with this:
animation: crazyShark;
Now, we'll add 1s and ease:
animation: crazyShark 1s ease;
Here's what we should end up with now:
nav figure { position: absolute; top: -20px; left: 50px; animation: crazyShark 1s ease;}
Also, you can dump all the different animation properties into one shorthand. It doesn't really matter what order you put them in as long as animation-duration comes before animation-delay. The following is one possible way to use all the animation properties that we've talked about ...
