{"id":454,"date":"2012-09-11T22:25:39","date_gmt":"2012-09-11T22:25:39","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=454"},"modified":"2019-08-27T16:09:50","modified_gmt":"2019-08-27T16:09:50","slug":"10-animation","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/10-animation\/","title":{"rendered":"10 Animation"},"content":{"rendered":"

Apple’s Webkit<\/a> team introduced a number of technologies, one of which is CSS Animations<\/a>, which allow an author to modify CSS property values over time. This is an evolving specification. Expect lots of changes as time goes by.\n<\/p>\n

The good news is that animations are hardware accelerated. The computer’s graphic chip does the heavy lifting, and not the CPU. This speeds animations up from the start.\n<\/p>\n

Here is an example by Anthony Calzadilla<\/a>:\n\n\n\n

\n
\n
\n
<\/div>\n
<\/div>\n<\/div>\n
\n
\n
\n
<\/div>\n
<\/div>\n<\/div>\n

\n<\/div>\n

\n<\/div>\n

\n
\n
\n
<\/div>\n
<\/div>\n<\/div>\n

\n<\/div>\n

\n<\/div>\n

<\/div>\n
\n
\n
\n
<\/div>\n
<\/div>\n<\/div>\n

\n<\/div>\n

\n<\/div>\n

\n
\n
\n
<\/div>\n
<\/div>\n<\/div>\n

\n<\/div>\n

\n<\/div>\n<\/div>\n<\/div>\n

<\/p>\n

Involved animations are complicated, and all kinds of tools will be developed to facilitate building more complicated CSS animations. In the mean time, there is a lot you can do<\/a> and instructions on how to do it<\/a> by adding class names to your code.
\n