CSS Animations

Generally, for CSS animations to work, they must bind to an element. CSS animations allow an HTML element to gradually change from one style to another without using JavaScript or Flash. By using CSS animations, people can change as many CSS properties as they want. Some properties of CSS animations include:

1. @keyframes
2. animation-name
3. animation-duration
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-timing-function
8. animation-fill-mode
9. animation

If you hover over the headers of each section on this website, you will notice that there will be a neon glow effect (but technically pure xenon makes the white glowy color while neon produces reds and oranges). In this "neon" glow css animation that I used based on code by Felix Rilling, the @keyframes rule and animation shorthand property are used. When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at specified times. To get the neon effect, the text shadows change. Below is a snippet of the code:

Additionally, the animation shorthand property uses the six animation properties: animation-name, animation-dureation, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. Here is another snippet of code broken down by each of its animation properties:

1. animation-name: neon2
2. animation-duration: 1.5s
3. animation-timing-function: ease-in-out
4. animation-iteration-count: infinite
5. animation-direction: alternate

According to the MDN (Mozilla Developer Network) Web Docs, there are three key advantages to CSS animations over traditional script-driven animation techniques. One advantage is that CSS animations are easy to use for simple animations and you can create them without having to know JavaScript. Another advantage of CSS animations is that the animations run well due to the rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible. One other advantage of CSS animations is that CSS animations allow the browser to control the animation sequence which then allows the browser to optimize performance and efficiency by reducing the update frequency of animations running in tabs that aren't currently visible.

However, despite the advtanges of CSS, there are limited effects. These limitations include the inability to animate along a curve, to use interesting eases such as a bounce, to use different eases for different properties by using keyframes, to have physics-based motion, to animate the scroll position, to have directional rotation, and finally to animate attributes. Additionally, when you change HTML elements, the browser may need to do a layout which will require it to calculate the position and size of all the lements affected by the change. Changing one element may lead to the position and size of other elements to be recalculates, which then results in a loop of changing each element. Thus, one should avoid animating properties that trigger layout. According to the article "High Performance Animations" by Paul Lewis and Paul Irish, they discuss the difference between imperative and declarative animations. Imperative animations involve JavaScript which is both a pro and con. Since the main thread is busy with other JavaScript, style calculations, layout, and painting, there is often thread contention which increases the chance of missing animation frames. However, animating in JavaScript still grants you more control as opposed to CSS. CSS on the other hand is declarative animation. As stated before, an advantage of CSS animations is that the browser can optimize the animation but it comes at the price of not being as flexible as JavaScript.