![]() It’s hard to remember all the property values are enabled by default in CSS. However, you might still want to add animation-timing-function: linear to your CSS rule-set to make your code more expressive - especially if you work in a team. That’s why the animation speed curve in our example earlier runs linearly. This means that we don’t have to declare the property in our CSS rule-sets when we want to use it. We use this property value to avoid an ugly jump which happens if you use the normal animation direction value.īy default, the CSS animation speed curve type is set to linear. This makes the animation play from beginning to end, and from the end to the beginning. We use the animation-direction property and give it a value of alternate.In CSS, the default is 1 animation cycle. This is what makes the animation loop continuously. We use the animation-iteration-count property and give it a value of infinite.We use the animation-duration: property and give it a value of 10s - now our animation’s total duration is 10 seconds.First, we add the animation-name property and give it a value of the backgroundColorPalette - now the background color keyframes we created earlier are assigned to the body element. ![]() If you did everything right, you should now have continuously running background color animation that smoothly transitions from color to color with 2 second intervals. Add the following CSS keyframes to your stylesheet:īody In CSS, animations keyframes work in percentages from 0% to 100%. Next up we’ll create the animation based on our plan. Okay, so we now have our 5 colors, that we’re going to throw into a looping animation that displays each color 2 seconds. You don’t need to memorize all those names (they are taken directly from Coolers), I just added them for good measure. These are the hex colors our upcoming background animation will loop through: I used to quickly generate a harmonious color palette for this example: Direct link to the Coolers palette
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |