CSS Animations vs Javascript

CSS Animations vs Javascript


CSS AnimationsCascading Style Sheets (CSS Animations) has really evolved through the years. Before, changing simple static properties like color, size, and border style is its only usage. It improved steadily though, and now we’re at the point that Javascript rivals the animation power of CSS. The king language of web development is getting usurped!

animation-direction: This property refers to the animation’s behavior between cycles. It’s values include: normal, reverse, alternate, and alternate-reverse.

Normal means that the animation will start from the very beginning on each cycle or iteration. Reverse animations always play backwards, starting at the end every cycle. Alternate animations start at the front, then alternate between going backwards and forwards through the animation.  Alternate-reverse means the animation does its first cycle in reverse, then alternates going forward and backward.

animation-duration: How long do you want the animation to last?  0.5 seconds is usually my default. Not too slow, but not too jumpy.

animation-delay: How long do you want to wait for the animation to start? Let the browser know. Declare it in seconds or milliseconds. So, if you want the animation to start halfway through, make it negative.

animation-timing-function: Transitions use the same as timing function. It determines how fast the animation moves depending on how far the progress of the animation is.

animation-iteration-count: How many times you want the animation cycle through.

animation-direction intertwines this property. You can also set it to decimal places; if you set animation to rotate through 360 degrees.

animation-play-state: This property’s main function is keeping track of if the animation is running or paused. It allows you to pause an animation and keep it at it’s current state, then run it from that state.

animation-fill-mode: This property refers to how you want the element to be styled after the animation runs it’s course.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *