Animation in HTML

Modern versions of HTML and CSS support various techniques which make certain kinds of animation easy We will first see an animation made using the canvas element in HTML5 –we will not have time to study its implementation in detail Then we will consider CSS Transitions and CSS Animations

An example animation Consider this HTML page It was written using the canvas element in HTML5 and JavaScript The source code for the page is very short Canvas example Your browser does not support the canvas element Your browser does not support the audio element. Your browser does not support the audio element. dramatics.jsmain.jsscream.wavjaws.wav But, because you have not yet studied JavaScript, we cannot consider it in detail Suffice it to say that this page barely scratches the surface of what is possible with the canvas element –a UCC student who graduated last year used the canvas element to build a powerful animation editor Instead of considering animation with the canvas element, we will consider CSS-based animation

CSS Transitions

CSS transitions CSS transitions provide a way to achieve simple animations of CSS properties Reference: We will consider CSS transitions now (A more sophisticated CSS animations using rule is possible, but that ie beyond our scope today)

CSS response to user actions The stylesheet below will cause a sharp change of style for the div element when the user holds his mouse over it div { width:200px; background-color:pink; font-size:10 } div:hover { width:400px; background-color:yellow; font-size:100 } This is a paragraph. Hello

Gradual change in response to user actions These two CSS properties allow use to specify gradual responses to user actions: transition-property transition-duration However, since the browser implementations still appear to be experimental/tentative, we must use vendor- specific prefixes

Gradual change in response to user actions (contd.) The stylesheet below will cause a gradual transition in style for the div element when the user holds his mouse over it div { width:200px; height:180px; background-color:pink; font-size:10; transition-property: width, background-color, font-size; transition-duration: 15s, 15s, 15s; -moz-transition-property: width, font-size;-moz-transition-duration: 15s, 15s, 15s; -ms-transition-property: width, font-size;-ms-transition-duration: 15s, 15s, 15s; -webkit-transition-property: width, font-size;-webkit-transition-duration: 15s, 15s, 15s; -o-transition-property: width, font-size;-o-transition-duration: 15s, 15s, 15s; } div:hover { width:400px; background-color:yellow; font-size:100 } This is a paragraph. Hello

Varying transition speed Normally, the speed of a transition is uniform between the start and finish of the transition Using the transition-timing-function property, we can vary the speed Browser implementations of this property still have vendor-specific prefixes transition-timing-function: …; -moz-transition-timing-function: …; /* Firefox 4 */ -webkit-transition-timing-function: …; /* Safari and Chrome */ -o-transition-timing-function: …; /* Opera */ -ms-transition-timing-function: …; /* 9 */

Values of the transition-timing-function property linear – specifies that a transition has the same speed from start to end, ease – specifies that a transition starts slowly, then speeds up but finishes slowly ease-in – specifies that a transition starts slowly ease-out – specifies that a transition ends slowly ease-in-out – specifies that a transition starts and ends slowly cubic-bezier(x1,y1,x2,y2) - see next slide

Values of transition-timing-function property (contd.) cubic-bezier(x1,y1,x2,y2) specifies that the speed of a transition varies along a cubic bezier curve, where the x axis is time and the y axis is the delta in the property being changed the start and end points of the bezier curve are fixed (0,0), start, change = 0 (1,1) - end, change = 100% of delta the four arguments are the x and y coordinates of the two control points for the cubic bezier curve linear is equivalent to cubic-bezier(0,0,1,1) ease is equivalent to cubic-bezier(0.25,0.1,0.25,1) ease-in is equivalent to cubic-bezier(0.42,0,1,1) ease-out – is equivalent to cubic-bezier(0,0,0.58,1) ease-out –is equivalent to cubic-bezier(0.42,0,0.58,1) An interactive utility for checking bezier values: (needs a modern browser)

transition-timing-function - example The transition in the stylesheet below will start very slowly and then accelerate towards the end See it in action at div { height: 180px; width:200px; background-color:pink; font-size:10; transition-property: width, background-color, font-size; transition-duration: 15s, 15s; transition-timing-function: cubic-bezier(.97,.01,.98,.05); -moz-transition-property: width, background-color, font-size;-moz-transition-duration: 15s, 15s; -moz-transition-timing-function: cubic-bezier(.97,.01,.98,.05); -o-transition-property: width, background-color, font-size;-o-transition-duration: 15s, 15s; -o-transition-timing-function: cubic-bezier(.97,.01,.98,.05); -ms-transition-property: width, background-color, font-size;-ms-transition-duration: 15s, 15s; -ms-transition-timing-function: cubic-bezier(.97,.01,.98,.05); -webkit-transition-property: width, background-color, font-size;-webkit-transition-duration: 15s, 15s; -webkit-transition-timing-function: cubic-bezier(.97,.01,.98,.05); } div:hover { width:400px; background-color:yellow; font-size:100;} This is a paragraph. Hello

Transitions can control transforms as well as styles This example is at The transform and three style properties transition gradually, over 15 secs, when the mouse is held over the initial position of the div element div { height: 180px; width:200px; background-color:pink; font-size:10; transition-property: transform, font-size, background-color, width; transition-duration: 15s, 15s, 15s,15s; -moz-transition-property: -moz-transform, font-size; background-color, width;-moz-transition-duration: 15s, 15s, 15s, 15s;-o-transition-property: -o-transform, font-size; background-color, width;-o-transition-duration: 15s, 15s, 15s, 15s;-ms-transition-property: -ms-transform, font-size; background-color, width;-ms-transition-duration: 15s, 15s, 15s, 15s;-webkit-transition- property: -webkit-transform, font-size; background-color, width; -webkit-transition-duration: 15s, 15s, 15s, 15s; } div:hover { width:400px; background-color:yellow; font-size:100 ; transform-origin:top left ; transform:rotate(-15deg ); -moz-transform-origin:top left;-webkit-transform-origin:top left;-ms-transform-origin:top left;-o-transform-origin:top left;-moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);-ms- transform:rotate(-15deg); -o-transform:rotate(-15deg);} This is a paragraph. Hello

The transition-delay property The stylesheet below will cause a delayed style transition for the div element when the user holds his mouse over it Check it out at p {width:200px;color:red} div { height: 180px; width:200px; background-color:pink; font-size:40; transition-property: width; transition-duration: 15s; transition-delay: 10s; -moz-transition-property: width;-moz-transition-duration: 15s;-moz-transition-delay: 10s;-ms-transition-property: width;-ms-transition-duration: 15s;-ms-transition-delay: 10s;-o-transition-property: width;-o-transition-duration: 15s;-o-transition-delay: 10s;-webkit-transition-property: width;-webkit-transition-duration: 15s;-webkit-transition- delay: 10s; } div:hover { width:400px;} Transition delay Note that, if you hover your mouse over the pink box below, the transition will not start for 10 seconds and will then last for 15 seconds Hello A transition-delay can have a negative value Example: if the delay above were -10s, the transition would start immediately, the box having a width as if the transition has started 10s before, and would then spend 5s more to finish the width change

CSS animations CSS transitions can be regarded as simple animations, –where we have only two keyframes, one at the start and one at the end In contrast, real CSS animations allow us to specify as many keyframes as we wish To illustrate, we will contrast the two web pages cited below on the next few slides First, see what happens on these two web pages when, in a browser which supports CSS3, you hover the mouse over the element with a red background – – Reference

CSS transitions versus animations: part 1, a transition Consider the CSS transition below: Transition versus Animation div:hover { font-size:50px; transition-duration:8s; -webkit-transition-duration:8s; -moz-transition-duration:8s; -ms-transition-duration:8s; -o-transition-duration:8s; } div {background-color:red; font-size:10px} Hello When the mouse moves onto the div element, the font-size increases gradually This is a simple 8-second animation whose –first keyframe has font-size=10px –last keyframe has font-size=50px Contrast this with the situation on the next slide

CSS transitions versus animations: part 2, an animation In contrast with the transition, this 8-second CSS animation has five keyframes –which deliberately produce a very jerky, coming-and-going movement Transition versus fontChange { 0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px } 75% { font-size: 300px } 100% { font-size: 50px } fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font- size: 300px }100% { font-size: 50px } fontChange {0% { font-size: 10px } 25% { font- size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } fontChange {0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px }} div:hover { font-size:50px; animation-name: fontChange; animation-duration: 8s; -moz-animation-name: fontChange;-moz-animation-duration: 8s;-webkit-animation-name: fontChange;-webkit- animation-duration: 8s; -ms-animation-name: fontChange;-ms-animation-duration: 8s;-o-animation-name: fontChange;-o-animation-duration: 8s; } div {background-color:red; font-size:10px} Hello

Writing a basic CSS animation CSS animations can have multiple properties However, to animate a HTML element using CSS, we must, at least,  associate the element with a set of keyframes, and  specify the duration of the desired animation  Format: {... animation-name: ; animation-duration: ;... }  Note that, at present, browser implementations of CSS animation require the use of vendor-specific prefixes to the relevant CSS properties  Example div:hover { font-size:50px animation-name: myKeyFrameSet; animation-duration: 8s; -moz-animation-name: myKeyFrameSet; -moz-animation-duration: 8s; -webkit-animation-name: myKeyFrameSet; -webkit-animation-duration: 8s; -ms-animation-name: myKeyFrameSet; -ms-animation-duration: 8s; -o-animation-name: myKeyFrameSet; -o-animation-duration: 8s; }

Writing a basic CSS animation (contd.) We specify a set of frames by using {,,... } Since, at present, we must use vendor-specific prefixes, we must actually write something like {,,... {,,... {,,... {,,... }

Writing a basic CSS animation (contd.) We specify an individual keyframe by specifying –the point in the animation when it must be used, and –the CSS style values which should apply at this point {,,... } Example 0% { font-size: 10px } We can combine several keyframes, by using a list of times, for fontChange { 0% { font-size: 10px } 25%,75% { font-size: 300px } 50%,100% { font-size: 50px } } The keyword from is equivalent to 0% and to is equivalent to fontChange { from { font-size: 10px } 25%,75% { font-size: 300px } 50%, to { font-size: 50px } }

The animation-iteration-count property The animation-iteration-count property specifies how many times the animation is played - the number of 'cycles' By default, the value of this property is 1 If the keyword infinite is used, the animation will repeat as long as the web page is open If a non-integer number is specifies as the value for this property, the animation will stop at some point in the middle of a cycle

animation-iteration-count property (contd.) The animation below is at It will repeat continuously, as long as the mouse is hovering over the area of the initial div element It will stop immediately if the mouse moves off the initial area Transition versus fontChange {0% { font-size: 10px }25% { font-size: 300px } 50% { font-size: 50px }75% { font-size: 300px } 100% { font-size: 50px fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } webkit-keyframes fontChange {0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font- size: 50px } fontChange {0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px }} div:hover { font-size:50px; animation-name: fontChange; animation-duration: 8s; animation-iteration-count: infinite; -moz-animation-name: fontChange;-moz-animation-duration: 8s; -moz-animation-iteration-count: infinite; -webkit-animation-name: fontChange;-webkit-animation-duration: 8s; -webkit-animation-iteration-count: infinite; -ms-animation-name: fontChange;-ms-animation-duration: 8s; -ms-animation-iteration-count: infinite; -o-animation-name: fontChange;-o-animation-duration: 8s; -o-animation-iteration-count: infinite; } div {background-color:red; font-size:10px} Hello

The animation-timing-function property The animation-timing-function property is a bit like the transition-timing- function property –this property can be given the same types of value as the transition timing function However, –while the transition-timing-function specifies the rate of change over the entire transition, –the animation timing function specifies the rate of change between keyframes of an animation

The animation-timing-function property The animation below is at Between each keyframe, the property change is controlled by a cubic bezier function which specifies that the change should start slowly and finish quickly Transition versus fontChange {0% { font-size: 10px }25% { font-size: 300px } 50% { font-size: 50px }75% { font-size: 300px } 100% { font-size: 50px fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } keyframes fontChange {0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } keyframes fontChange {0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px }} div:hover { font-size:50px; animation-name: fontChange; animation-duration: 24s; animation-timing-function: cubic-bezier(.97,.01,.98,.05); -moz-animation-name: fontChange;-moz-animation-duration: 8s; -moz-animation-timing-function: cubic-bezier(.97,.01,.98,.05); -webkit-animation-name: fontChange;-webkit-animation-duration: 8s; -webkit-animation-timing-function: cubic-bezier(.97,.01,.98,.05); -ms-animation-name: fontChange;-ms-animation-duration: 8s; -ms-animation-timing-function: cubic-bezier(.97,.01,.98,.05); -o-animation-name: fontChange;-o-animation-duration: 8s; -o-animation-timing-function: cubic-bezier(.97,.01,.98,.05);} div {background-color:red; font-size:10px} Hello

animation-timing-function property: local versus global On the last slide, the fontChange animation had a global timing function, which affected all the keframes in the animation However, we can also have local timing functions inside each fontChange { 0% {font-size: 10px; animation-timing-function: ease-out; } 25% {font-size:300px; animation-timing-function: ease-in; } 50% {font-size: 50px; animation-timing-function: ease-out; } 75% {font-size: 300px; animation-timing-function: ease-in; } 100% {font-size: 50px; } }

animation-timing-function property: local versus global (contd.) The animation below is at Different timing functions are used in the intervals between keyframes Continuous fontChange { 0% {font-size: 10px; animation-timing-function: ease-out; } 25% {font-size: 300px; animation-timing-function: ease-in; } 50% {font-size: 50px; animation-timing-function: ease-out; } 75% {font-size: 300px; animation-timing-function: ease-in; } 100% {font-size: 50px} fontChange {0% {font-size: 10px; -moz-animation-timing-function: ease-out;} 25% {font-size: 300px; -moz-animation-timing-function: ease- in;}50% {font-size: 50px; -moz-animation-timing-function: ease-out;}75% {font-size: 300px; -moz-animation-timing-function: ease-in;}100% {font-size: 50px} fontChange { 0% {font-size: 10px; -ms-animation-timing-function: ease-out;} 25% {font-size: 300px; -ms-animation-timing- function: ease-in;}50% {font-size: 50px; -ms-animation-timing-function: ease-out;}75% {font-size: 300px; -ms-animation-timing-function: ease-in; 100% {font-size: 50px} fontChange {0% {font-size: 10px; -webkit-animation-timing-function: ease-out;}25% {font-size: 300px; - webkit-animation-timing-function: ease-in;}50% {font-size: 50px; -webkit-animation-timing-function: ease-out;}75% {font-size: 300px; -webkit- animation-timing-function: ease-in;} 100% {font-size: 50px} fontChange { 0% {font-size: 10px; -o-animation-timing-function: ease- out;}25% {font-size: 300px; -o-animation-timing-function: ease-in;} 50% {font-size: 50px; -o-animation-timing-function: ease-out;}75% {font-size: 300px; -o-animation-timing-function: ease-in;}100% {font-size: 50px} } -moz-keyframes fontChange { 0% {font-size: 10px; -moz-animation-timing- function: ease-out;}25% {font-size: 300px; -moz-animation-timing-function: ease-in;}50% {font-size: 50px; -moz-animation-timing-function: ease- out;}75% {font-size: 300px; -moz-animation-timing-function: ease-in;} 100% {font-size: 50px} } div:hover {animation-name: fontChange; animation-duration: 24s; -moz-animation-name: fontChange;-moz-animation-duration: 24s; -ms-animation-name: fontChange;-ms-animation-duration: 24s; -o-animation- name: fontChange; -o-animation-duration: 24s;-webkit-animation-name: fontChange; -webkit-animation-duration: 24s; } div {background-color:red; font-size:10px} Well, Hello

Animation activation without user interaction View this web-page in a Mozilla browser: The animation will start automatically –the bell will rotate –text representing the sound of the bell will appear and rotate You must use a Mozilla browser because, to keep the file short, only the -moz- animation is implemented, –but -webkit- animation could also have been implemented However, the functionality cannot yet be provided in -ms- and -o- browsers On the next few slides, we will consider the implementation of a simpler version of this page

Simple example of automatic animation activation We will consider the source code for a simplified version of the page on the last slide View this web-page in a Mozilla browser: Text representing the sound of a bell will be animated automatically To keep the HTML file short, only -moz- animation is implemented, but -webkit- animation could also have been implemented However, the functionality cannot yet be provided in -ms- and -o- browsers

Simple example of automatic animation activation (contd.) The div is initially hidden but is then subjected to a 4-second animation which is repeated forever Ding-dong bell div.dingDong {color:blue; font-size:50px; visibility:hidden; -moz-animation-name: dingding; -moz-animation-duration: 4s; -moz-animation-iteration-count: infinite; dingding { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg);visibility:visible; } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz- transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz- transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); }23% { -moz- transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); }27% { -moz-transform: rotate(-12deg); } 29% { -moz- transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); }35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); }41% { -moz-transform: rotate(1deg); visibility:hidden; }43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } Please wait a moment - the bell will ring... Ding dong

Simple example of automatic animation activation (contd.) In each cycle, the animated element starts at 0°, rotates for the first 43% of the cycle before coming to rest at 0° and staying there until the end of the cycle Initially, the animated element is hidden, becomes visible at 1% and is hidden again at dingding { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); visibility:visible; } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); visibility:hidden; } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } }

Reminder: the CSS positioning properties The position property specifies how the appropriate locations for elements should be computed. –There are five possible values static - this is the default; a statically positioned element is placed according to its arrival in the flow of material onto the page fixed - an element with fixed position is placed relative to the browser window; It will not move even if the window is scrolled; It is removed from the normal flow; Other elements are placed as if the fixed positioned element does not exist, so it can overlap other elements relative - A relatively positioned element is moved relative to its normal position in the flow of material onto the page (so it can overlap other elements) but the space reserved for the element in the normal flow is still preserved absolute - An absolutely positioned element is placed relative to the first parent element that has a position other than static; if no such element is found, the containing block is ; it is removed from the normal flow; other elements are placed as if the absolutely positioned element does not exist, so it can overlap other elements inherit - an element whose position is inherited gets the same location as its parent Elements are located using the top, bottom, left, and right properties, but these properties will not work unless the position property is set first and the way these properties work depends on the value of the position property When an element is placed outside the normal flow, it can overlap other elements, in which case the z-index property can be used to specify how the overlapping elements should be stacked on the page

animation-direction property In the next few slides, we will contrast these two web-pages in a Mozilla browser (example 1) (example 2) The default value for animation-direction is normal which means that the animation should be played as specified in the keyframes If the value alternate is used for the property, the animation should play in reverse on alternate cycles

animation-direction property, example 1 In this page, the position, left and top properties are used to animate the location of the div element The blue div always moves clockwise - see the 5 th and 6 th images here div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } Hello

animation-direction property, example 2 In this page, the div alternates between moving clockwise in one cycle and counter-clockwise on the next cycle - see the 5 th and 6 th images here div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } Hello

animation-delay property In this page, the animation of the div element will not start until 40 seconds after the page is loaded div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-delay:40s; rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } Hello

Animating with the z-index property In the next few slides, we will contrast these two web-pages in a Mozilla browser (example 1) (example 2)

Animating with the z-index property, example 1 In this page, the first (blue) div is continuously animated clockwise while the second (red) div is statically located When the blue div overlaps the red div it appears on top div { width:100px; height:100px; background:red;color:white; } div.rover {width:100px; height:100px; background:blue;color:white; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; rove { 0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;}100% {left:0px; top:0px;} } Hello Goodbye

Animating with the z-index property, example 2 Again, the first (blue) div is continuously animated clockwise while the second (red) div is statically located But this time, the roving div is given a z-index of -1 to make it go behind the static div when they overlap div { width:100px; height:100px; background:red;color:white; } div.rover {width:100px; height:100px; background:blue;color:white; z-index:-1; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; rove { 0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;}100% {left:0px; top:0px;} } Hello Goodbye

The animation property The animation property is a shorthand for (subsets of) six of the animating properties: animation-name, animation-duration, animation- timing-function, animation-delay, animation- iteration-count, animation-direction Example animation: rove 5s infinite; -moz-animation: rove 5s infinite; -webkit-animation: rove 5s infinite;

The animation-play-state property This property specifies whether the animation is running or paused It is probably most useful when using JavaScript to control a CSS animation But the next slide shows that it can also be used in other ways

Using the animation-play-state property with a pseudo-class This page is at The normal state for the div is that it stays in the top left of the page, but –when the mouse hovers over the div, it starts to move to the left –however it only moves all the way (900 pixels) to the left if the user also moves the house to the left, to keep it hovering the div div { width:100px; height:100px; background:red; position:relative; -moz-animation:move 5s; -moz-animation-play-state:paused; } div:hover { -moz-animation-play-state:running; move { 0% { left:0px; } 100% { left:900px; } } Hello

The animation-fill-mode property animation-fill-mode specifies what property values are applied by an animation outside the time it is executing –By default, an animation will not affect property values between the time it is applied (when the animation-name property is set on an element) and the time it begins execution (which is determined by the animation-delay property). –Also, by default, an animation does not affect property values after the animation ends (determined by the animation-duration property). –The value of animation-fill-mode can override this behavior. Possible values for the animation-fill-mode property backwards - the animation will apply the property values defined in its 0% keyframe as soon as the animation is applied, during the period defined by animation-delay forwards - the animation will apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed. The last executing keyframe is the 100% keyframe unless the animation has animation-direction set to alternate and the iteration count is a finite even number, in which case it is the 0% keyframe both the animation will follow the rules for both ‘forwards’ and ‘backwards’. That is, it will extend the animation properties in both directions. none - this is the default value for the property animation-fill-mode appears to be supported only by -moz- browsers at present

Nested animations View this animation in a -moz- browser: The bell rings as we have seen before but, at the same time, the bell and ringing text move sideways This could be achieved in several ways –but in this implementation, we achieve it by animating some elements inside another element which is also being animated independently

Nested animations (contd.) The bell and ringing text are nested inside another div element As we shall see in the stylesheet on the next slide, this envelope is animated to move horizontally –while the bell and ringing text are animated as before Ding-dong bell Watch the bell ring while moving sideways Ding dong

Stylesheet for the nested animations The bell and ringing text are nested inside another div element div.envelope { position:relative; -moz-animation: moveH 12s alternate infinite; moveH { 0% { left:0px; } 100% { left:900px; } } div.bell {visibility:hidden; color:blue; width:200; -moz-animation: ring2 4s ease-in-out ring2 { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg);visibility:visible; } 3% { -moz-transform: rotate(- 28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz- transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); visibility:hidden; } 43% { -moz-transform: rotate(0); } 100% { - moz-transform: rotate(0); } } img.bell { -moz-animation: ring 4s ease-in-out 8s infinite; -moz-transform-origin: 50% 4px; ring { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); } 5% { -moz- transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz- transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz- transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz- transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz- transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } }

Simultaneous animations View this animation in a -moz- browser: As before, the bell moves sideways while ringing, but it also moves vertically This could be achieved in several ways –but in this implementation, we achieve it by applying multiple animations to the envelop div

Simultaneous animations (contd.) The only change to the HTML page is to make it refer to a different external stylesheet Ding-dong bell Watch the bell ring while moving sideways Ding dong

Stylesheet for the simultaneous animations Two animations are applied, simultaneously, to the envelope div div.envelope { position:relative; -moz-animation: moveH 12s alternate infinite, moveH 12s alternate infinite; moveH { 0% { left:0px; } 100% { left:900px; } moveV { 0% { top:0px; } 100% { top:300px; } } div.bell {visibility:hidden; color:blue; width:200; -moz-animation: ring2 4s ease-in-out ring2 { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg);visibility:visible; } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { - moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz- transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz- transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz- transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); visibility:hidden; } 43% { -moz-transform: rotate(0); } 100% { - moz-transform: rotate(0); } } img.bell { -moz-animation: ring 4s ease-in-out 8s infinite; -moz-transform-origin: 50% 4px; ring { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); } 5% { -moz- transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz- transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz- transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz- transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz- transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } }

The background-size property We consider this property here because, as we will see later, it can be used in animation This property was introduced in CSS3 Reference: The background-size property can be used to stretch or shrink specify a background image The size of the image can be specified in one of three ways:  by specifying one or two lengths, percentages or instances of the keyword auto - if only one item is given, auto is assumed for the other  by using the contain keyword contain  by using the contain keyword cover The keyword auto keeps the original aspect ratio and, if used twice, makes the image keep its intrinsic size. The keyword contain keeps the original aspect ratio but scales the image to make it as large as possible while keeping it within the background area. The keyword cover keeps the original aspect ratio but scales the image to make it as large enough to cover the background area

The background-size property (contd.) See The intrinsic size of the flower image is 200px by 133 px. The div elements below all have the following style settings: div {border: solid red 1px; width:400px; height:200px; background-color:red; background-image:url('flower.jpg'); background-repeat:no-repeat} In addition, each div element has whatever background-size specification is shown.

The background-size property, with repeat allowed See The intrinsic size of the flower image is 200px by 133 px. The div elements below all have the following style settings: div {border: solid red 1px; width:400px; height:200px; background-color:red; background-image:url('flower.jpg'); } In addition, each div element has whatever background-size specification is shown.

Example animation: a flapping butterfly By using the background-size property to adjust the size of an image we can make symmetrical images, such as butterflies or birds, appear to "flap" View this animation in a -moz- browser: The butterfly flaps its wings, turns it body and flies across the screen We will look at the implementation on the next slide

flying butterfly implementation Flying butterfly animation.butterfly {height: 100px; width: 100px;position:relative; background: url(butterfly.jpg) 50% no-repeat; flap { 0% {background-size:100px 100px;} 100% {background-size: 100px 20px;} turn { 0% {-moz-transform:rotate(0deg); } 100% {-moz-transform:rotate(45deg); } move { 0% {left:0px } 100% {left:500px } } <div class="butterfly" style=" -moz-animation: flap 500ms linear infinite, turn 2s linear alternate infinite, move 5s linear infinite; ">

Animating images - a problem We have to be careful when animating with a jpg –because the jpg format does not support transparency View this animation in a -moz- browser: We see the white background of the jpg image against the blue background of the HTML page If we are animating an image in a format which does not support transparency, we must ensure that the image and all the region on the HTML page where it will move have the same background colour

Better to animate with images in formats that support transparency It is better to animate images which are in a format that does support transparency –such as 32-bit PNG format View this animation in a -moz- browser: The page body has a background-image so there are different colours in different places But we never see the background of the butterfly image

Improved implementation of flying butterfly This uses a PNG file, so the butterfly's background is transparent Flying butterfly animation body {background-image: url('flower.jpg'); background-size:cover; }.butterfly {height: 100px; width: 100px;position:relative; background: url(butterflyCartoon.png) 50% no-repeat; flap { 0% {background-size:100px 100px;} 100% {background-size: 100px 20px;} turn { 0% {-moz-transform:rotate(0deg); } 100% {-moz-transform:rotate(45deg); } move { 0% {left:0px } 100% {left:500px } } <div class="butterfly" style=" -moz-animation: flap 500ms linear infinite, turn 2s linear alternate infinite, move 5s linear infinite; ">

Animating over content with absolute positioning Images with transparency can also be safely animated over page content that is located using absolute positioning View this animation in a -moz- browser: The butterfly can be safely animated over the text on the page

Animating over content with absolute positioning (contd.) Flying butterfly animation body {background-image: url('flower.jpg'); background-size:cover; }.butterfly {height: 100px; width: 100px;position:relative; background: url(butterflyCartoon.png) 50% no-repeat; flap { 0% {background-size:100px 100px;} 100% {background-size: 100px 20px;} turn { 0% {-moz-transform:rotate(0deg); } 100% {-moz-transform:rotate(45deg); } move { 0% {left:0px } 100% {left:500px } } Watch <div class="butterfly" style=" -moz-animation: flap 500ms linear infinite, turn 2s linear alternate infinite, move 5s linear infinite; ">

Animating a canvas element View this animation in a -moz- browser: Later, we will consider using JavaScript to animate within a canvas But we can animate an entire canvas element, just like any other HTML element

Animating a canvas element (contd.) Rotating canvas #canvas {-moz-animation:turn 2s turn { 0% {-moz-transform: rotate(0deg); } 100% {-moz-transform: rotate(360deg); } } var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); context.fillStyle="red"; context.fillRect(100,100,50,50); context.rotate(-Math.PI/8); context.fillStyle="blue"; context.fillRect(100,100,50,50);

Motivating example: underwater scuba-diver View this animation in a -moz- or -webkit- browser: The diver falls through the seascape

underwater scuba-diver (contd.) HTML file Diver Watch the diver CSS stylesheet #underwater {... } #underwater > div {... } #underwater > div > img

underwater scuba-diver (contd.) We want the diver to start above the "porthole" looking at the underwater scene But, unfortunately, he appears outside the porthole We will overcome this problem in a better version of the style-sheet #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; } #underwater > div { width: 100px; height: 100px; position: absolute; top:-100px; left:250px; -webkit-animation-name : dive; -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; -moz-animation-name : dive; -moz-animation-duration : 7s; -moz-animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

Hiding the diver outside the porthole View this animation in a -moz- or -webkit- browser: The diver starts, as before, above the porthole He ends, as before, below the porthole But he is only visible when he is in line with the porthole

Stylesheet to hide the diver outside the porthole #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; overflow : hidden; } #underwater > div { width: 100px; height: 100px; position: absolute; top:-100px; left:250px; -webkit-animation-name : dive; -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; -moz-animation-name : dive; -moz-animation-duration : 7s; -moz-animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

The CSS overflow property This property was introduced in CSS2 It specifies what happens if the content of a HTML element overflows the box for the element It can have one of five different values visible This is the default value for the property. Overflowing content is not clipped. It appears outside the element's box. hidden Overflowing content will be invisible scroll A scroll-bar is added, to allow the user see the overflowing content auto If overflow is clipped, a scroll-bar is added inherit the value of the overflow property for an element should be inherited from the element's parent

Creating animated elements with the DOM View this animation in a -moz- or -webkit- browser: A diver falls through the seascape The CSS stylesheet is the same as before But there is no "diver" element in the HTML page –It is created using the DOM and Javascript Diver created with Javascript A diver will be created with Javascript

Contents of diver.css are the same as before #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; overflow : hidden; } #underwater > div { width: 100px; height: 100px; position: absolute; top:-100px; left:250px; -webkit-animation-name : dive; -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; -moz-animation-name : dive; -moz-animation-duration : 7s; -moz-animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

Contents of diver.js When the page is loaded a diver is created using Javascript Its animation is controlled by generic div and img rules in the stylesheet function init() { var envelope = document.getElementById('underwater'); var someDiver=newDiver(); envelope.appendChild(someDiver); } function newDiver() { var diverDiv = document.createElement('div'); var image = document.createElement('img'); image.src = 'diver.png'; diverDiv.appendChild(image); return diverDiv; } window.addEventListener('load', init, false);

Getting ready to randomize the diver View this animation in a -moz- or -webkit- browser: As before, a diver falls through the seascape The HTML file is the same as before But some styling is moved from the stylesheet into Javascript so that, in a future version, this styling can be randomized

The HTML file is the same as before We don't need to examine the HTML page because it is the same as before Diver created with Javascript A diver will be created with Javascript

The default position for the diver is no longer specified in diver.css #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; overflow : hidden; } #underwater > div { width: 100px; height: 100px; position: absolute; /* top:-100px; left:250px; */ -webkit-animation-name : dive; -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; -moz-animation-name : dive; -moz-animation-duration : 7s; -moz-animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

The default diver position is now specified in diver.js function init() { var envelope = document.getElementById('underwater'); var someDiver=newDiver(); envelope.appendChild(someDiver); } function newDiver() { var diverDiv = document.createElement('div'); var image = document.createElement('img'); image.src = 'diver.png'; diverDiv.appendChild(image); diverDiv.style.top = "-100px"; diverDiv.style.left = '250px'; return diverDiv; } window.addEventListener('load', init, false);

Randomizing the default position for the diver View this animation in a -moz- or -webkit- browser: As before, a diver falls through the seascape But, now, the horizontal position of the diver is random –it is different each time the page is loaded A random integer between 100 and 400 is used to specify his default horizontal position

The HTML file is the same as before We don't need to examine the HTML page because it is the same as before Diver created with Javascript A diver will be created with Javascript

The CSS file is the same as before We don't need to examine the CSS file - it is the same as before #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; overflow : hidden; } #underwater > div { width: 100px; height: 100px; position: absolute; -webkit-animation-name : dive; -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; -moz-animation-name : dive; -moz-animation-duration : 7s; -moz-animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

The default diver position is now random function init() { var envelope = document.getElementById('underwater'); var someDiver=newDiver(); envelope.appendChild(someDiver); } function randomInteger(lower,upper) { return lower + Math.round(Math.random() * (upper-lower)); } function newDiver() { var diverDiv = document.createElement('div'); var image = document.createElement('img'); image.src = 'diver.png'; diverDiv.appendChild(image); diverDiv.style.top = "-100px"; diverDiv.style.left = randomInteger(100,400)+'px'; return diverDiv; } window.addEventListener('load', init, false);

Creating multiple divers with random default positions View this animation in a -moz- or -webkit- browser: Now, three divers fall through the seascape The horizontal positions of the divers are random –each has a different, random, position –these positions are different each time the page is loaded Random integers between 100 and 400 are used to specify these default horizontal positions

The HTML file is almost the same as before We don't need to examine the HTML page because, apart from some different English text, it is the same as before Diver created with Javascript Several divers will be created with Javascript

The CSS file is the same as before We don't need to examine the CSS file - it is the same as before #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; overflow : hidden; } #underwater > div { width: 100px; height: 100px; position: absolute; -webkit-animation-name : dive; -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; -moz-animation-name : dive; -moz-animation-duration : 7s; -moz-animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

A for-loop is used to create multiple divers const NUMBER_OF_DIVERS = 3; function init() { var envelope = document.getElementById('underwater'); var someDiver; for (var i = 0; i < NUMBER_OF_DIVERS; i++) { someDiver=newDiver(); envelope.appendChild(someDiver); } } function randomInteger(lower,upper) { return lower + Math.round(Math.random() * (upper-lower)); } function newDiver() { var diverDiv = document.createElement('div'); var image = document.createElement('img'); image.src = 'diver.png'; diverDiv.appendChild(image); diverDiv.style.top = "-100px"; diverDiv.style.left = randomInteger(100,400)+'px'; return diverDiv; } window.addEventListener('load', init, false);

Creating multiple divers with random appearances View this animation in a -moz- or -webkit- browser: Now, the divers have different, random, appearances A random integer between 1 and 3 is used to choose between several images, diver1.png, diver2.png and diver3.png However, this cannot guarantee that all divers will look different

The HTML file is the same as before We don't need to examine the HTML page because it is the same as before Diver created with Javascript Several divers will be created with Javascript

The CSS file is the same as before We don't need to examine the CSS file - it is the same as before #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; overflow : hidden; } #underwater > div { width: 100px; height: 100px; position: absolute; -webkit-animation-name : dive; -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; -moz-animation-name : dive; -moz-animation-duration : 7s; -moz-animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

A random integer is used to choose each diver's image const NUMBER_OF_DIVERS = 3; function init() { var envelope = document.getElementById('underwater'); var someDiver; for (var i = 0; i < NUMBER_OF_DIVERS; i++) { someDiver=newDiver(); envelope.appendChild(someDiver); } } function randomInteger(lower,upper) { return lower + Math.round(Math.random() * (upper-lower)); } function newDiver() { var diverDiv = document.createElement('div'); var image = document.createElement('img'); image.src = 'diver'+randomInteger(1,3)+'.png'; diverDiv.appendChild(image); diverDiv.style.top = "-100px"; diverDiv.style.left = randomInteger(100,400)+'px'; return diverDiv; } window.addEventListener('load', init, false);

Choosing randomly among multiple animations View this animation in a -moz- or -webkit- browser: Now, the divers have different animations A random integer between 1 and 3 is used to choose between several animations, dive1, dive2 and dive3

The HTML file is the same as before We don't need to examine the HTML page because it is the same as before Diver created with Javascript Several divers will be created with Javascript

The CSS file is different The CSS file now contains several different sets of keyframes It no longer specifies an animation for each diver div this will be chosen by the Javascript #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; overflow : hidden; } #underwater > div { width: 100px; height: 100px; position: absolute; /* -webkit-animation-name : dive; */ -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; /*-moz-animation-name : dive;*/ -moz-animation-duration : 7s; -moz- animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive1 { 0% { -webkit-transform: rotate(90deg) translate(0px, 0px); } 100% { -webkit- transform: translate(0px, 750px); } dive1 { 0% { -moz-transform : rotate(90deg) translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } dive2 { 0% { -webkit-transform: scale(-1,1) translate(0px, 0px); } 100% { -webkit- transform: scale(-1,1) translate(0px, 750px ); } dive2 { 0% { -moz-transform: rotate(90deg) translate(0px, -50px); } 100% { -moz-transform: scale(-1,1) translate(0px, 750px); } dive3 { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive3 { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

A random integer is used to choose each diver's animation const NUMBER_OF_DIVERS = 3; function init() { var envelope = document.getElementById('underwater'); var someDiver; for (var i = 0; i < NUMBER_OF_DIVERS; i++) { someDiver=newDiver(); envelope.appendChild(someDiver); } } function randomInteger(lower,upper) { return lower + Math.round(Math.random() * (upper-lower)); } function newDiver() { var diverDiv = document.createElement('div'); var image = document.createElement('img'); image.src = 'diver'+randomInteger(1,3)+'.png'; diverDiv.appendChild(image); diverDiv.style.top = "-100px"; diverDiv.style.left = randomInteger(100,400)+'px'; diverDiv.style.webkitAnimationName = 'dive'+randomInteger(1,3); diverDiv.style.MozAnimationName = 'dive'+randomInteger(1,3); /*Note the Moz*/ return diverDiv; } window.addEventListener('load', init, false);

Controlling the animations with Javascript View this animation in a -moz- or -webkit- browser: You can pause and resume the animations This is controlled by Javascript

The HTML file is a little different The HTML file now contains buttons User-control of animation You can pause and resume the animation Pause Resume

The CSS file is unchanged We don't need to examine the CSS page because it is the same as before #underwater { position: relative; height: 650px; width: 500px; border: solid 1px black; background: url('seascape.jpg') no-repeat top left; overflow : hidden; } #underwater > div { width: 100px; height: 100px; position: absolute; /* -webkit-animation-name : dive; */ -webkit-animation-duration : 7s; -webkit-animation-delay : 3s; -webkit-animation-iteration-count: infinite; /*-moz-animation-name : dive;*/ -moz-animation-duration : 7s; -moz- animation-delay : 3s; -moz-animation-iteration-count: infinite; } #underwater > div > img { width: 100px; height: 100px; dive1 { 0% { -webkit-transform: rotate(90deg) translate(0px, 0px); } 100% { -webkit- transform: translate(0px, 750px); } dive1 { 0% { -moz-transform : rotate(90deg) translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } dive2 { 0% { -webkit-transform: scale(-1,1) translate(0px, 0px); } 100% { -webkit-transform: scale(-1,1) translate(0px, 750px ); } dive2 { 0% { -moz-transform: rotate(90deg) translate(0px, -50px); } 100% { -moz-transform: scale(- 1,1) translate(0px, 750px); } dive3 { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } dive3 { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

The diver.js file (part 1) The init() function attaches event handlers to the buttons const NUMBER_OF_DIVERS = 3; function init() { var envelope = document.getElementById('underwater'); var someDiver; for (var i = 0; i < NUMBER_OF_DIVERS; i++) { someDiver=newDiver(); envelope.appendChild(someDiver); } var button = document.getElementById('button1'); button.addEventListener('click',pause,false); button = document.getElementById('button2'); button.addEventListener('click',resume,false); } function randomInteger(lower,upper) { return lower + Math.round(Math.random() * (upper-lower)); } function newDiver() { var diverDiv = document.createElement('div'); var image = document.createElement('img'); image.src = 'diver'+randomInteger(1,3)+'.png'; diverDiv.appendChild(image); diverDiv.style.top = "-100px"; diverDiv.style.left = randomInteger(100,400)+'px'; diverDiv.style.webkitAnimationName = 'dive'+randomInteger(1,3); diverDiv.style.MozAnimationName = 'dive'+randomInteger(1,3); /*Note the Moz*/ return diverDiv; }

The diver.js file (part 2) function pause() { var envelope = document.getElementById('underwater'); for (var i = 0; i < NUMBER_OF_DIVERS; i++) { var diver = envelope.getElementsByTagName('div')[i]; diver.style.MozAnimationPlayState='paused'; /*Notice the Moz*/ diver.style.webkitAnimationPlayState='paused'; } } function resume() { var envelope = document.getElementById('underwater'); for (var i = 0; i < NUMBER_OF_DIVERS; i++) { var diver = envelope.getElementsByTagName('div')[i]; diver.style.MozAnimationPlayState='running'; /*Notice the Moz*/ diver.style.webkitAnimationPlayState='running'; } } window.addEventListener('load', init, false);