{"id":152,"date":"2026-01-11T23:58:28","date_gmt":"2026-01-12T04:58:28","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/?post_type=chapter&p=152"},"modified":"2026-02-18T13:41:25","modified_gmt":"2026-02-18T18:41:25","slug":"chapter-10-animation","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/chapter-10-animation\/","title":{"raw":"Chapter 10 \u2022 Animation","rendered":"Chapter 10 \u2022 Animation"},"content":{"raw":"Animation has considerable power to catch readers' attention, to entertain, and to illustrate mechanisms involving motion. Designers must be careful not to over-distract readers with repeating or obtrusive animations.\r\n\r\nThree methods to animate with CSS styles include:\r\n
    \r\n \t
  1. CSS animation with no user interaction<\/li>\r\n \t
  2. CSS animation with user interaction through the mouse-over (:hover) and click (:active) pseudoclasses<\/li>\r\n \t
  3. CSS animation with JavaScript interaction<\/li>\r\n<\/ol>\r\n

    Requirements for CSS Animation<\/h2>\r\nAnimating a tag with CSS requires three components:\r\n
      \r\n \t
    1. an image or text object suitable for animating, often a transparent PNG or GIF like the car below<\/li>\r\n \t
    2. a named @keyframes rule with major change points specified as percentages of completion<\/li>\r\n \t
    3. a link in the tag's CSS selector to the named @keyframes rule using the animation-name style<\/li>\r\n \t
    4. an animation-duration style specifying the length of the animation<\/li>\r\n<\/ol>\r\n[caption id=\"attachment_155\" align=\"alignnone\" width=\"200\"]\"\"<\/a> Car illustration courtesy of pngtree.com[\/caption]\r\n

      Example<\/h2>\r\nAssume we want to animate the above car by having it accelerate and drive across the screen.\r\n\r\nHTML for the car:\r\n
      <img id=\"car\" src=\"car.png\" \/><\/pre>\r\n@keyframes rule for the car animation:\r\n
      @keyframes letsgo {\r\n    0% {left: 0;}\r\n  100% {left: 120vw;} \/* vw (viewport widths) units >100 position the tag off the page *\/\r\n}\r\n\r\n\r\n<\/pre>\r\nCSS for the car (remember that \/* denotes comments that explain the style):\r\n
      #car {\r\n    width: 200px;\r\n    position: relative; \/* position must be declared even though \"relative\" is the default *\/\r\n    left: 0;\r\n    animation-name: letsgo; \/* connects the car to the @keyframes rule *\/\r\n    animation-duration: 5s; \/* 5 seconds *\/\r\n    animation-fill-mode: forwards; \/* go to the end and stay there *\/\r\n    animation-timing-function: ease-in; \/* to accelerate to full speed *\/\r\n<\/pre>\r\n
      Interaction with :hover or :active<\/h2>\r\nTo introduce user interaction with the :hover (mouse over) or :active (click) pseudo classes, first the animation-play-state must be set to paused. This means the animation will not start by itself:\r\n
      #car {\r\n    animation-play-state: paused;\r\n}\r\n<\/pre>\r\nThe :hover pseudoclass selects the tag when the mouse is over it, e.g., #car:hover. After selecting the car with #car:hover, you can set the animation-play-state to running:\r\n
      #car:hover {\r\n    animation-play-state: running;\r\n}\r\n<\/pre>\r\nFor the animation to keep playing, users must keep the mouse over the animated object (for :hover) or keep the mouse button depressed (for :active).\r\n
      Interaction with Javascript<\/h2>\r\nUsing one tag (e.g., a button) to affect another (e.g., the car) requires use of the Javascript programming language. To add a \"Go\" button, the you would set the animation-play-state to paused, as with the :hover or :active pseudoclasses shown above. Then you would add a button that's programmed to set the animation-play-state to running:\r\n
      <button>Go!<\/button>\r\n<\/pre>\r\nNote in the Javascript the use of \"camel typography\" where capital letters separate the words. Also nested quotation marks alternate between double and single quotes to avoid confusing the browser.\r\n
      Reference Document<\/h2>\r\nAnimation: rich-adams.net > GRC 365 > Reference Documents > Animation<\/a>","rendered":"
      Animation has considerable power to catch readers’ attention, to entertain, and to illustrate mechanisms involving motion. Designers must be careful not to over-distract readers with repeating or obtrusive animations.<\/p>\n
      Three methods to animate with CSS styles include:<\/p>\n
        \n
      1. CSS animation with no user interaction<\/li>\n
      2. CSS animation with user interaction through the mouse-over (:hover) and click (:active) pseudoclasses<\/li>\n
      3. CSS animation with JavaScript interaction<\/li>\n<\/ol>\n
        Requirements for CSS Animation<\/h2>\n
        Animating a tag with CSS requires three components:<\/p>\n
          \n
        1. an image or text object suitable for animating, often a transparent PNG or GIF like the car below<\/li>\n
        2. a named @keyframes rule with major change points specified as percentages of completion<\/li>\n
        3. a link in the tag’s CSS selector to the named @keyframes rule using the animation-name style<\/li>\n
        4. an animation-duration style specifying the length of the animation<\/li>\n<\/ol>\n
          \"\"<\/a>
          Car illustration courtesy of pngtree.com<\/figcaption><\/figure>\n
          Example<\/h2>\n
          Assume we want to animate the above car by having it accelerate and drive across the screen.<\/p>\n
          HTML for the car:<\/p>\n
          <img id=\"car\" src=\"car.png\" \/><\/pre>\n
          @keyframes rule for the car animation:<\/p>\n
          @keyframes letsgo {\r\n    0% {left: 0;}\r\n  100% {left: 120vw;} \/* vw (viewport widths) units >100 position the tag off the page *\/\r\n}\r\n\r\n\r\n<\/pre>\n
          CSS for the car (remember that \/* denotes comments that explain the style):<\/p>\n
          #car {\r\n    width: 200px;\r\n    position: relative; \/* position must be declared even though \"relative\" is the default *\/\r\n    left: 0;\r\n    animation-name: letsgo; \/* connects the car to the @keyframes rule *\/\r\n    animation-duration: 5s; \/* 5 seconds *\/\r\n    animation-fill-mode: forwards; \/* go to the end and stay there *\/\r\n    animation-timing-function: ease-in; \/* to accelerate to full speed *\/\r\n<\/pre>\n
          Interaction with :hover or :active<\/h2>\n
          To introduce user interaction with the :hover (mouse over) or :active (click) pseudo classes, first the animation-play-state must be set to paused. This means the animation will not start by itself:<\/p>\n
          #car {\r\n    animation-play-state: paused;\r\n}\r\n<\/pre>\n
          The :hover pseudoclass selects the tag when the mouse is over it, e.g., #car:hover. After selecting the car with #car:hover, you can set the animation-play-state to running:<\/p>\n
          #car:hover {\r\n    animation-play-state: running;\r\n}\r\n<\/pre>\n
          For the animation to keep playing, users must keep the mouse over the animated object (for :hover) or keep the mouse button depressed (for :active).<\/p>\n
          Interaction with Javascript<\/h2>\n
          Using one tag (e.g., a button) to affect another (e.g., the car) requires use of the Javascript programming language. To add a “Go” button, the you would set the animation-play-state to paused, as with the :hover or :active pseudoclasses shown above. Then you would add a button that’s programmed to set the animation-play-state to running:<\/p>\n
          <button>Go!<\/button>\r\n<\/pre>\n
          Note in the Javascript the use of “camel typography” where capital letters separate the words. Also nested quotation marks alternate between double and single quotes to avoid confusing the browser.<\/p>\n
          Reference Document<\/h2>\n
          Animation: rich-adams.net > GRC 365 > Reference Documents > Animation<\/a><\/p>\n","protected":false},"author":6,"menu_order":10,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-152","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":10,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/152\/revisions"}],"predecessor-version":[{"id":226,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/152\/revisions\/226"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/152\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/media?parent=152"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapter-type?post=152"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/contributor?post=152"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/license?post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}