{"id":27,"date":"2018-02-08T16:15:22","date_gmt":"2018-02-08T16:15:22","guid":{"rendered":"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/?post_type=chapter&#038;p=27"},"modified":"2019-04-23T21:27:30","modified_gmt":"2019-04-23T21:27:30","slug":"chapter-9-animation","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/chapter\/chapter-9-animation\/","title":{"raw":"Chapter 8 - Animation","rendered":"Chapter 8 &#8211; Animation"},"content":{"raw":"The ability to show moving objects that respond to reader inputs has made vector graphic animation a valuable addition to the web (<strong><span style=\"color: #ff0000\">Figure 8-1<\/span><\/strong>). Think of vector animations as Adobe Illustrator drawings that move and interact with users.\r\n\r\n[caption id=\"attachment_612\" align=\"aligncenter\" width=\"1298\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype.jpg\" alt=\"\" class=\"wp-image-612 size-full\" style=\"border: 1px solid gray\" width=\"1298\" height=\"844\" \/> <strong>Figure 8-1.<\/strong> This bouncing ball animated in Tumult Hype is a classic animation used to illustrate the stage, drawing tools, timeline, keyframes, and scripting through the use of control buttons. Tumult Hype. Reprinted with permission.[\/caption]\r\n\r\nThe value of vector graphics is that they are defined by mathematical formulas, not like bitmaps as in photos or Adobe Photoshop files. Therefore the files have smaller sizes and load more quickly into the browser.\r\n\r\nTo appreciate the difference between vector and bitmapped graphics, think of a green square that\u2019s 100 pixels on each side. A bitmap creates the square using 100\u00d7100, or 10,000, green-coloured pixels, each with 8-bit RGB colour, for a total of 16.7 million colours. If enlarged beyond 72-ppi screen resolution, the individual squares would be visible and appear pixelized, or stair-stepped. If enlarged two times at the same resolution, the number of pixels would quadruple to 40,000.\r\n\r\nIn a vector graphic, the square is defined by a mathematical equation. If enlarged, it appears smooth while the file remains the same size. Thus vector graphic animations are characterized by small file sizes and scalable dimensions that reproduce with good resolution.\r\n\r\nAnimated vector graphics were popularized by Adobe Flash, introduced in 1996. Flash saves files in the proprietary .fla format, which can be exported to opensource .swf for viewing in applications, in browsers, and with Adobe\u2019s free Flash Player utility. (SWF stands for Shockwave Flash, in reference to the program\u2019s original creator.)\r\n\r\nWith the introduction of the iPhone, iPad, and iOS operating system, Apple refused to support Flash, citing security flaws in the proprietary file format. Since then the use of Flash has declined, and more animations are being created in HTML5. Flash users who want to create HTML5 animations can export .fla files with Google\u2019s free Swiffy extension or use a dedicated HTML5 animator like Adobe\u2019s Edge, Tumult Hype, and a variety of other programs. Still, the animation concepts are the same.\r\n<h1>Animation Concepts<\/h1>\r\nKey requirements for an animation program include (<span style=\"color: #ff0000\"><strong>Figure 8-2<\/strong><\/span>):\r\n<ul>\r\n \t<li><em>Stage.<\/em> The screen, or drawing board, or pasteboard, are represented as a \u201cstage\u201d for the moving objects.<\/li>\r\n \t<li><em>Drawing.<\/em> Users must be able to draw objects, including points, lines, curves, fills, and strokes.<\/li>\r\n \t<li><em>Timeline.<\/em> To make objects move on the stage at the desired speed, users must have a timeline, measured in frames\/sec., and in the total number of frames. Commonly used frame rates are 20, 24, and 30 fps. Round numbers facilitate calculating the total number of frames needed for an animation of a specified time.<\/li>\r\n \t<li><em>Keyframes.<\/em> A concept borrowed from film animation, keyframes identify transition points in the action. The program \u201cfills in the blanks\u201d in between user-drawn keyframes through the process of tweening.<\/li>\r\n \t<li><em>Layers.<\/em> To organize and work easily with multiple moving objects, it is convenient to place each object on a separate layer.<\/li>\r\n \t<li><em>Scripting language.<\/em> A control language enables users to control and interact with the animation. Interactions include starting and stopping the animation, or moving to specified points in the timeline.<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_613\" align=\"aligncenter\" width=\"2428\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype.jpg\" alt=\"\" class=\"wp-image-613 size-full\" style=\"border: 1px solid gray\" width=\"2428\" height=\"1830\" \/> <strong>Figure 8-2.<\/strong> This screen capture of the ball animation in Hype shows the objects on the stage in separate layers, timeline in seconds, keyframes (blue diamonds), and \u201ctweens\u201d (blue lines) or intermediate frames. Tumult Hype. Reprinted with permission.[\/caption]\r\n<h2>Methods of Animation<\/h2>\r\nThere are several ways to create animations for the web, including the CSS animate style, JavaScript and the jQuery library with its animate functions, and animation programs like Tumult Hype and Adobe Animate.\r\n<h2>CSS Animate<\/h2>\r\nHTML objects can be animated using the CSS @keyframes rule and animate style. A CSS animation changes a tag from one style to another at a specified interval. The changes (e.g., colour, position, size) must be specified in the @keyframes rule inside the &lt;style&gt; statement. The @keyframes rule needs to be applied to an object using the animation-name and animation-duration styles.\r\n\r\n<span style=\"color: #ff0000\"><strong>Figure 8-3<\/strong><\/span> shows a simple example of the @keyframes rule and animate style applied to a circular div.\r\n\r\n[caption id=\"attachment_288\" align=\"aligncenter\" width=\"1024\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate-1024x729.jpg\" alt=\"Screenshot showing @keyframes code and preview\" class=\"wp-image-288 size-large\" style=\"border: 1px solid grey\" width=\"1024\" height=\"729\" \/> <strong>Figure 8-3<\/strong>. Example of the @keyframes rule (line 15) and animate style (lines 13 and 14) applied to a circular div. When the page is loaded, the div moves across the page from left to right. dobe\u00ae Dreamweaver\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.[\/caption]\r\n<table class=\"table-elements\"><caption>Table 8-1. CSS Animate Styles<\/caption>\r\n<thead>\r\n<tr>\r\n<th>style<\/th>\r\n<th>description<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td>animation-name<\/td>\r\n<td>name of @keyframes rule<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>animation-duration<\/td>\r\n<td>time in seconds (s) to complete animation<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>animation-delay<\/td>\r\n<td>time in seconds before animation starts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>animation-iteration-count<\/td>\r\n<td>number of times the animation plays (number or infinite)<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>animation-direction<\/td>\r\n<td>normal, reverse (backwards), alternate (forward, backward), alternate-reverse (backward, forward)<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>animation-timing-function<\/td>\r\n<td>linear, ease, ease-in, ease-out, ease-in-out<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>animation-fill-mode<\/td>\r\n<td>none, forwards, backwards, both<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h3>User Interaction<\/h3>\r\nA CSS animation can be triggered when the reader has the mouse over the object or when the user clicks on the object by applying the animation styles to the :hover or :active states. In the example shown in <span style=\"color: #ff0000\"><strong>Figure 8-3<\/strong><\/span>, the blue circle could start to move if the animation styles in lines 13 and 14 are applied to the div:hover (mouse over) or div:active (mouse click) selector.\r\n\r\nTo start, stop, or pause the animation using a button, then you would need to use <a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/chapter\/chapter-10-javascript\/\">JavaScript<\/a> or <a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/chapter\/chapter-11-javascript-libraries\/\">jQuery<\/a>.\r\n<h2>Animation with jQuery<\/h2>\r\nThe jQuery JavaScript library can be used to animated objects using the jQuery animate method. The animate method produces an animation by modifying one or more CSS styles, such as left or right position on the page.\r\n<p style=\"text-align: center\"><strong>Syntax<\/strong>: (selector).animate({styles},speed,easing,callback)<\/p>\r\nWhere:\r\n<ul>\r\n \t<li>selector is the ID or class of the item to animate<\/li>\r\n \t<li>styles is a list of styles to be animated<\/li>\r\n \t<li>speed is the duration of the animation, specified in milliseconds or as \"fast\" or \"slow\"<\/li>\r\n \t<li>easing is the relative speed at the beginning and end (linear or swing)<\/li>\r\n<\/ul>\r\n<span style=\"color: #ff0000\"><strong>Figure 8-4<\/strong><\/span> shows an example of a simple animation done with jQuery. When the \u201cGo\u201d button is pressed, the motorcycle moves 1200px to the right. When \u201cCome Back\u201d is pressed, it moves 1200px to the left.\r\n\r\n[caption id=\"attachment_299\" align=\"aligncenter\" width=\"1024\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.04_DW-W_Motorcycle-1024x420.jpg\" alt=\"jQuery code and preview panel\" class=\"wp-image-299 size-large\" style=\"border: 1px solid gray\" width=\"1024\" height=\"420\" \/> <strong>Figure 8-4<\/strong>. Simple animation done with jQuery, which allows for user interaction via the two buttons. dobe\u00ae Dreamweaver\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.[\/caption]\r\n\r\nReaders are referred to <a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/chapter\/chapter-11-javascript-libraries\/\">Chapter 10 JavaScript Libraries<\/a> and to the <a href=\"https:\/\/jquery.org\">jQuery site<\/a> for more details.\r\n<h2>Animation with Tumult Hype<\/h2>\r\nTumult Hype (<span style=\"color: #ff0000\"><strong>Figure 8-5<\/strong><\/span>) is an easy-to-use program that creates animations in HTML5. The animations can be exported as HTML for placement in web pages and as Apple Widgets (.wdgt) for direct placement in Apple iBooks Author.\r\n\r\nSimilar to Adobe Flash, Hype uses the timeline and keyframe models to create animations. Buttons can be added to start, stop, pause, and continue the animations.\r\n\r\n[caption id=\"attachment_302\" align=\"aligncenter\" width=\"1024\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.05_HY-W_HypeAnimation-1024x554.jpg\" alt=\"Screenshot of Hype with keyframe and preview panels\" class=\"wp-image-302 size-large\" width=\"1024\" height=\"554\" \/> <strong>Figure 8-5<\/strong>. Screenshot of Tumult Hype animation showing the stage, timeline, keyframe properties, and inspector. Tumult Hype. Reprinted with permission.[\/caption]\r\n\r\n&nbsp;","rendered":"<p>The ability to show moving objects that respond to reader inputs has made vector graphic animation a valuable addition to the web (<strong><span style=\"color: #ff0000\">Figure 8-1<\/span><\/strong>). Think of vector animations as Adobe Illustrator drawings that move and interact with users.<\/p>\n<figure id=\"attachment_612\" aria-describedby=\"caption-attachment-612\" style=\"width: 1298px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype.jpg\" alt=\"\" class=\"wp-image-612 size-full\" style=\"border: 1px solid gray\" width=\"1298\" height=\"844\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype.jpg 1298w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype-300x195.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype-768x499.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype-1024x666.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype-65x42.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype-225x146.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-1_Ball-in-Hype-350x228.jpg 350w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><figcaption id=\"caption-attachment-612\" class=\"wp-caption-text\"><strong>Figure 8-1.<\/strong> This bouncing ball animated in Tumult Hype is a classic animation used to illustrate the stage, drawing tools, timeline, keyframes, and scripting through the use of control buttons. Tumult Hype. Reprinted with permission.<\/figcaption><\/figure>\n<p>The value of vector graphics is that they are defined by mathematical formulas, not like bitmaps as in photos or Adobe Photoshop files. Therefore the files have smaller sizes and load more quickly into the browser.<\/p>\n<p>To appreciate the difference between vector and bitmapped graphics, think of a green square that\u2019s 100 pixels on each side. A bitmap creates the square using 100\u00d7100, or 10,000, green-coloured pixels, each with 8-bit RGB colour, for a total of 16.7 million colours. If enlarged beyond 72-ppi screen resolution, the individual squares would be visible and appear pixelized, or stair-stepped. If enlarged two times at the same resolution, the number of pixels would quadruple to 40,000.<\/p>\n<p>In a vector graphic, the square is defined by a mathematical equation. If enlarged, it appears smooth while the file remains the same size. Thus vector graphic animations are characterized by small file sizes and scalable dimensions that reproduce with good resolution.<\/p>\n<p>Animated vector graphics were popularized by Adobe Flash, introduced in 1996. Flash saves files in the proprietary .fla format, which can be exported to opensource .swf for viewing in applications, in browsers, and with Adobe\u2019s free Flash Player utility. (SWF stands for Shockwave Flash, in reference to the program\u2019s original creator.)<\/p>\n<p>With the introduction of the iPhone, iPad, and iOS operating system, Apple refused to support Flash, citing security flaws in the proprietary file format. Since then the use of Flash has declined, and more animations are being created in HTML5. Flash users who want to create HTML5 animations can export .fla files with Google\u2019s free Swiffy extension or use a dedicated HTML5 animator like Adobe\u2019s Edge, Tumult Hype, and a variety of other programs. Still, the animation concepts are the same.<\/p>\n<h1>Animation Concepts<\/h1>\n<p>Key requirements for an animation program include (<span style=\"color: #ff0000\"><strong>Figure 8-2<\/strong><\/span>):<\/p>\n<ul>\n<li><em>Stage.<\/em> The screen, or drawing board, or pasteboard, are represented as a \u201cstage\u201d for the moving objects.<\/li>\n<li><em>Drawing.<\/em> Users must be able to draw objects, including points, lines, curves, fills, and strokes.<\/li>\n<li><em>Timeline.<\/em> To make objects move on the stage at the desired speed, users must have a timeline, measured in frames\/sec., and in the total number of frames. Commonly used frame rates are 20, 24, and 30 fps. Round numbers facilitate calculating the total number of frames needed for an animation of a specified time.<\/li>\n<li><em>Keyframes.<\/em> A concept borrowed from film animation, keyframes identify transition points in the action. The program \u201cfills in the blanks\u201d in between user-drawn keyframes through the process of tweening.<\/li>\n<li><em>Layers.<\/em> To organize and work easily with multiple moving objects, it is convenient to place each object on a separate layer.<\/li>\n<li><em>Scripting language.<\/em> A control language enables users to control and interact with the animation. Interactions include starting and stopping the animation, or moving to specified points in the timeline.<\/li>\n<\/ul>\n<figure id=\"attachment_613\" aria-describedby=\"caption-attachment-613\" style=\"width: 2428px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype.jpg\" alt=\"\" class=\"wp-image-613 size-full\" style=\"border: 1px solid gray\" width=\"2428\" height=\"1830\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype.jpg 2428w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype-300x226.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype-768x579.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype-1024x772.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype-65x49.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype-225x170.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/8-2_Ball-in-Hype-350x264.jpg 350w\" sizes=\"auto, (max-width: 2428px) 100vw, 2428px\" \/><figcaption id=\"caption-attachment-613\" class=\"wp-caption-text\"><strong>Figure 8-2.<\/strong> This screen capture of the ball animation in Hype shows the objects on the stage in separate layers, timeline in seconds, keyframes (blue diamonds), and \u201ctweens\u201d (blue lines) or intermediate frames. Tumult Hype. Reprinted with permission.<\/figcaption><\/figure>\n<h2>Methods of Animation<\/h2>\n<p>There are several ways to create animations for the web, including the CSS animate style, JavaScript and the jQuery library with its animate functions, and animation programs like Tumult Hype and Adobe Animate.<\/p>\n<h2>CSS Animate<\/h2>\n<p>HTML objects can be animated using the CSS @keyframes rule and animate style. A CSS animation changes a tag from one style to another at a specified interval. The changes (e.g., colour, position, size) must be specified in the @keyframes rule inside the &lt;style&gt; statement. The @keyframes rule needs to be applied to an object using the animation-name and animation-duration styles.<\/p>\n<p><span style=\"color: #ff0000\"><strong>Figure 8-3<\/strong><\/span> shows a simple example of the @keyframes rule and animate style applied to a circular div.<\/p>\n<figure id=\"attachment_288\" aria-describedby=\"caption-attachment-288\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate-1024x729.jpg\" alt=\"Screenshot showing @keyframes code and preview\" class=\"wp-image-288 size-large\" style=\"border: 1px solid grey\" width=\"1024\" height=\"729\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate-1024x729.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate-300x214.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate-768x547.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate-65x46.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate-225x160.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate-350x249.jpg 350w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.03_DW-W_CSSAnimate.jpg 1762w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-288\" class=\"wp-caption-text\"><strong>Figure 8-3<\/strong>. Example of the @keyframes rule (line 15) and animate style (lines 13 and 14) applied to a circular div. When the page is loaded, the div moves across the page from left to right. dobe\u00ae Dreamweaver\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.<\/figcaption><\/figure>\n<table class=\"table-elements\">\n<caption>Table 8-1. CSS Animate Styles<\/caption>\n<thead>\n<tr>\n<th>style<\/th>\n<th>description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>animation-name<\/td>\n<td>name of @keyframes rule<\/td>\n<\/tr>\n<tr>\n<td>animation-duration<\/td>\n<td>time in seconds (s) to complete animation<\/td>\n<\/tr>\n<tr>\n<td>animation-delay<\/td>\n<td>time in seconds before animation starts<\/td>\n<\/tr>\n<tr>\n<td>animation-iteration-count<\/td>\n<td>number of times the animation plays (number or infinite)<\/td>\n<\/tr>\n<tr>\n<td>animation-direction<\/td>\n<td>normal, reverse (backwards), alternate (forward, backward), alternate-reverse (backward, forward)<\/td>\n<\/tr>\n<tr>\n<td>animation-timing-function<\/td>\n<td>linear, ease, ease-in, ease-out, ease-in-out<\/td>\n<\/tr>\n<tr>\n<td>animation-fill-mode<\/td>\n<td>none, forwards, backwards, both<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>User Interaction<\/h3>\n<p>A CSS animation can be triggered when the reader has the mouse over the object or when the user clicks on the object by applying the animation styles to the :hover or :active states. In the example shown in <span style=\"color: #ff0000\"><strong>Figure 8-3<\/strong><\/span>, the blue circle could start to move if the animation styles in lines 13 and 14 are applied to the div:hover (mouse over) or div:active (mouse click) selector.<\/p>\n<p>To start, stop, or pause the animation using a button, then you would need to use <a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/chapter\/chapter-10-javascript\/\">JavaScript<\/a> or <a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/chapter\/chapter-11-javascript-libraries\/\">jQuery<\/a>.<\/p>\n<h2>Animation with jQuery<\/h2>\n<p>The jQuery JavaScript library can be used to animated objects using the jQuery animate method. The animate method produces an animation by modifying one or more CSS styles, such as left or right position on the page.<\/p>\n<p style=\"text-align: center\"><strong>Syntax<\/strong>: (selector).animate({styles},speed,easing,callback)<\/p>\n<p>Where:<\/p>\n<ul>\n<li>selector is the ID or class of the item to animate<\/li>\n<li>styles is a list of styles to be animated<\/li>\n<li>speed is the duration of the animation, specified in milliseconds or as &#8220;fast&#8221; or &#8220;slow&#8221;<\/li>\n<li>easing is the relative speed at the beginning and end (linear or swing)<\/li>\n<\/ul>\n<p><span style=\"color: #ff0000\"><strong>Figure 8-4<\/strong><\/span> shows an example of a simple animation done with jQuery. When the \u201cGo\u201d button is pressed, the motorcycle moves 1200px to the right. When \u201cCome Back\u201d is pressed, it moves 1200px to the left.<\/p>\n<figure id=\"attachment_299\" aria-describedby=\"caption-attachment-299\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.04_DW-W_Motorcycle-1024x420.jpg\" alt=\"jQuery code and preview panel\" class=\"wp-image-299 size-large\" style=\"border: 1px solid gray\" width=\"1024\" height=\"420\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.04_DW-W_Motorcycle-1024x420.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.04_DW-W_Motorcycle-300x123.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.04_DW-W_Motorcycle-768x315.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.04_DW-W_Motorcycle-65x27.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.04_DW-W_Motorcycle-225x92.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.04_DW-W_Motorcycle-350x144.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-299\" class=\"wp-caption-text\"><strong>Figure 8-4<\/strong>. Simple animation done with jQuery, which allows for user interaction via the two buttons. dobe\u00ae Dreamweaver\u00ae screenshot(s) reprinted with permission from Adobe Systems Incorporated.<\/figcaption><\/figure>\n<p>Readers are referred to <a href=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/chapter\/chapter-11-javascript-libraries\/\">Chapter 10 JavaScript Libraries<\/a> and to the <a href=\"https:\/\/jquery.org\">jQuery site<\/a> for more details.<\/p>\n<h2>Animation with Tumult Hype<\/h2>\n<p>Tumult Hype (<span style=\"color: #ff0000\"><strong>Figure 8-5<\/strong><\/span>) is an easy-to-use program that creates animations in HTML5. The animations can be exported as HTML for placement in web pages and as Apple Widgets (.wdgt) for direct placement in Apple iBooks Author.<\/p>\n<p>Similar to Adobe Flash, Hype uses the timeline and keyframe models to create animations. Buttons can be added to start, stop, pause, and continue the animations.<\/p>\n<figure id=\"attachment_302\" aria-describedby=\"caption-attachment-302\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.05_HY-W_HypeAnimation-1024x554.jpg\" alt=\"Screenshot of Hype with keyframe and preview panels\" class=\"wp-image-302 size-large\" width=\"1024\" height=\"554\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.05_HY-W_HypeAnimation-1024x554.jpg 1024w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.05_HY-W_HypeAnimation-300x162.jpg 300w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.05_HY-W_HypeAnimation-768x415.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.05_HY-W_HypeAnimation-65x35.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.05_HY-W_HypeAnimation-225x122.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-content\/uploads\/sites\/25\/2018\/02\/9.05_HY-W_HypeAnimation-350x189.jpg 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-302\" class=\"wp-caption-text\"><strong>Figure 8-5<\/strong>. Screenshot of Tumult Hype animation showing the stage, timeline, keyframe properties, and inspector. Tumult Hype. Reprinted with permission.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"author":6,"menu_order":8,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[47],"contributor":[],"license":[],"class_list":["post-27","chapter","type-chapter","status-publish","hentry","chapter-type-standard"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":33,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/27\/revisions"}],"predecessor-version":[{"id":662,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/27\/revisions\/662"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapters\/27\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/pressbooks\/v2\/chapter-type?post=27"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/contributor?post=27"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign\/wp-json\/wp\/v2\/license?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}