MOCKSTACKS
EN
Questions And Answers

More Tutorials









CSS Animations

CSS animation provide a way to control animation speed when changing CSS properties. ... With CSS animation enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

Parameter Details
property Either the CSS property to transition on, or all, which specifies all transition-able properties.
duration Transition time, either in seconds or milliseconds.
timing-function Specifies a function to define how intermediate values for properties are computed. Common values are ease, linear, and step-end.
delay Amount of time, in seconds or milliseconds, to wait before playing the animation.
@keyframes [ from | to | <percentage> ] You can either specify a set time with a percentage value, or two percentage values, ie 10%, 20%, for a period of time where the keyframe's set attributes are set.
block Any amount of CSS attributes for the keyframe


For multi-stage CSS animations, you can create CSS @keyframes. Keyframes allow you to define multiple animation points, called a keyframe, to define more complex animations.


Example

@keyframes rainbow-background {
 0% { background-color: #ff0000; }
 8.333% { background-color: #ff8000; }
 16.667% { background-color: #ffff00; }
 25.000% { background-color: #80ff00; }
 33.333% { background-color: #00ff00; }
 41.667% { background-color: #00ff80; }
 50.000% { background-color: #00ffff; }
 58.333% { background-color: #0080ff; }
 66.667% { background-color: #0000ff; }
 75.000% { background-color: #8000ff; }
 83.333% { background-color: #ff00ff; }
 91.667% { background-color: #ff0080; }
 100.00% { background-color: #ff0000; }
}

.RainbowBackground {
 animation: rainbow-background 5s infinite;
}


There's a few different things to note here. First, the actual @keyframes syntax. This sets the name of the animation to rainbow-background.

@keyframes rainbow-background{ 0% { background-color: #ff0000; }

This is the definition for a keyframe within the animation. The first part, the 0% in the case, defines where the keyframe is during the animation. The 0% implies it is 0% of the total animation time from the beginning.

The animation will automatically transition between keyframes. So, by setting the next background color at 8.333%, the animation will smoothly take 8.333% of the time to transition between those keyframes.

RainbowBackground { animation: rainbow-background 5s infinite; }

This code attaches our animation to all elements which have the .RainbowBackground class.


The actual animation property takes the following arguments.

  • animation-name: The name of our animation. In this case, rainbow-background.
  • animation-duration: How long the animation will take, in this case 5 seconds.
  • animation-iteration-count (Optional): The number of times the animation will loop. In this case, the animation will go on indefinitely. By default, the animation will play once..
  • animation-delay (Optional): Specifies how long to wait before the animation starts. It defaults to 0 seconds, and can take negative values. For example, -2s would start the animation 2 seconds into its loop.
  • animation-timing-function (Optional):Specifies the speed curve of the animation. It defaults to ease, where the animation starts slow, gets faster and ends slow.

In this particular example, both the 0% and 100% keyframes specify { background-color: #ff0000; }. Wherever two or more keyframes share a state, one may specify them in a single statement. In this case, the two 0% and 100% lines could be replaced with this single line:

0%, 100% { background-color: #ff0000; }






Conclusion

In this page (written and validated by ) you learned about CSS Animations . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Animations using will-change Attribute.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.