CSS animations CSS transitions can be regarded as simple animations, –where we have only two...

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– http://www.cs.ucc.ie/j.bowen/cs4506/slides/8secTransition.html

– http://www.cs.ucc.ie/j.bowen/cs4506/slides/8secAnimation.html

• Reference http://www.w3.org/TR/css3-animations/

http://www.cs.ucc.ie/j.bowen/cs4506/slides/8secTransition.html

http://www.cs.ucc.ie/j.bowen/cs4506/slides/8secAnimation.html

http://www.w3.org/TR/css3-animations/

CSS transitions versus animations: part 1, a transition• Consider the CSS transition below:

<!DOCTYPE HTML><html><head><title>Transition versus Animation</title><style>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}</style></head><body><div>Hello</div></body></html>

• 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<!DOCTYPE HTML><html><head><title>Transition versus Animation</title><style>@keyframes fontChange { 0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px } 75% { font-size: 300px } 100% { font-size: 50px } }@-moz-keyframes 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 }}@-ms-keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } }@-o-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: 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;


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:

<elementSelector> { ...

animation-name: <nameOfSetOfKeyframes>;

animation-duration: <someDuration>;

...

} 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 the @keyframes rule

@keyframes <someName> { <keyframeSpec1>, <keyframe2>, ... }

• Since, at present, we must use vendor-specific prefixes, we must actually write something like this

@keyframes <someName> { <keyframeSpec1>, <keyframe2>, ... } @-moz-keyframes <someName> {<keyframeSpec1>, <keyframe2>, ... } @-webkit-keyframes <someName> {<keyframeSpec1>, <keyframe2>, ...} @-ms-keyframes <someName> {<keyframeSpec1>, <keyframe2>, ... } @-o-keyframes <someName> {<keyframeSpec1>, <keyframe2>, ... }

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

<when> { <styleDeclaration1>, <styleDeclaration1>, ... }Example

0% { font-size: 10px }• We can combine several keyframes, by using a list of times, for example

@keyframes 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 100%@keyframes 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

http://www.cs.ucc.ie/j.bowen/cs4506/slides/infinitelyRepeated8secAnimation.html

• 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

<!DOCTYPE HTML><html><head><title>Transition versus Animation</title><style>@keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px } 50% { font-size: 50px }75% { font-size: 300px } 100% { font-size: 50px }}@-moz-keyframes 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 }}@-ms-keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } }@-o-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: 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;


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 athttp://www.cs.ucc.ie/j.bowen/cs4506/slides/24secAnimationWithTimingFunction.html

• Between each keyframe, the property change is controlled by a cubic bezier function which specifies that the change should start slowly and finish quickly

<!DOCTYPE HTML><html><head><title>Transition versus Animation</title><style>@keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px } 50% { font-size: 50px }75% { font-size: 300px } 100% { font-size: 50px }}@-moz-keyframes 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 }}@-ms-keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } }@-o-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}</style></head><body><div>Hello</div></body></html>

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 keyframe

@keyframes 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 http://www.cs.ucc.ie/j.bowen/cs4506/slides/24secAnimationWithTimingFunction.html

• Different timing functions are used in the intervals between keyframes

<!DOCTYPE HTML><html><head><title>Continuous Animation</title><style>

@keyframes 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} }@-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} }@-ms-keyframes 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} }@-webkit-keyframes 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} }@-o-keyframes 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}</style></head><body>Well,<div>Hello</div></body></html>

Animation activation without user interaction

• View this web-page in a Mozilla browser:http://www.cs.ucc.ie/j.bowen/cs4506/slides/bell.html

• 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

http://www.cs.ucc.ie/j.bowen/cs4506/slides/bell.html

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:http://www.cs.ucc.ie/j.bowen/cs4506/slides/dingDong.html

• 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

http://www.cs.ucc.ie/j.bowen/cs4506/slides/dingDong.html

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

<!DOCTYPE html>

<html><head><title>Ding-dong bell</title>

<style>

div.dingDong {color:blue; font-size:50px; visibility:hidden;

-moz-animation-name: dingding;

-moz-animation-duration: 4s;

-moz-animation-iteration-count: infinite; }

@-moz-keyframes 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); } }

</style>

</head><body>

<h1>Please wait a moment - the bell will ring ...</h1>

<div class="dingDong">Ding dong</div>

</body></html>

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 41%

@-moz-keyframes 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 <html>; 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 browserhttp://www.cs.ucc.ie/j.bowen/cs4506/slides/animation-direction1.html (example 1)

http://www.cs.ucc.ie/j.bowen/cs4506/slides/animation-direction2.html (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

http://www.cs.ucc.ie/j.bowen/cs4506/slides/animation-direction1.html

http://www.cs.ucc.ie/j.bowen/cs4506/slides/animation-direction2.html

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 5th and 6th

images here

<!DOCTYPE html><html><head><style type="text/css">div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; }@-moz-keyframes 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;} }</style></head><body><div>Hello</div></body></html>

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 5th and 6th images here

<!DOCTYPE html><html><head><style type="text/css">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-keyframes 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;} }</style></head><body><div>Hello</div></body></html>

animation-delay property

• In this page, the animation of the div element will not start until 40 seconds after the page is loaded

<!DOCTYPE html><html><head>

<style type="text/css">

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; }

@-moz-keyframes 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;} }

</style></head><body><div>Hello</div></body>

</html>

Animating with the z-index property

• In the next few slides, we will contrast these two web-pages in a Mozilla browser

http://www.cs.ucc.ie/j.bowen/cs4506/slides/animationZ1.html (example 1)

http://www.cs.ucc.ie/j.bowen/cs4506/slides/animationZ2.html (example 2)

http://www.cs.ucc.ie/j.bowen/cs4506/slides/animationZ1.html

http://www.cs.ucc.ie/j.bowen/cs4506/slides/animationZ2.html

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

<!DOCTYPE html><html><head><style>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; }@-moz-keyframes 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;}}</style></head><body><div class="rover">Hello</div><div>Goodbye</div></body></html>

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 <!DOCTYPE html><html><head><style>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; }@-moz-keyframes 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;}}</style></head><body><div class="rover">Hello</div><div>Goodbye</div></body></html>

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 http://www.cs.ucc.ie/j.bowen/cs4506/slides/animation-play-state.html

• 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

<!DOCTYPE html><html><head><style> 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; }@-moz-keyframes move { 0% { left:0px; } 100% { left:900px; } }</style></head><body><div>Hello</div></body></html>

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: http://www.cs.ucc.ie/j.bowen/cs4506/slides/movingBell1.html

• 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

<!DOCTYPE html>


<link rel="stylesheet" href="movingBell1.css" />

</head>

<body>

<h1>Watch the bell ring while moving sideways</h1>

<div class="envelope">

<img class="bell" src="redBell.jpg" />

<div class="bell" style="font-size:50px">Ding dong</div>

</div>

</body>

</html>

Stylesheet for the nested animations• The bell and ringing text are nested inside another div elementdiv.envelope { position:relative; -moz-animation: moveH 12s alternate infinite; }

@-moz-keyframes moveH { 0% { left:0px; } 100% { left:900px; } }

div.bell {visibility:hidden; color:blue; width:200; -moz-animation: ring2 4s ease-in-out infinite;}

@-moz-keyframes 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; }

@-moz-keyframes 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: http://www.cs.ucc.ie/j.bowen/cs4506/slides/movingBell2.html

• 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

<!DOCTYPE html>


<link rel="stylesheet" href="movingBell2.css" />

</head>

<body>

<h1>Watch the bell ring while moving sideways</h1>

<div class="envelope">

<img class="bell" src="redBell.jpg" />

<div class="bell" style="font-size:50px">Ding dong</div>

</div>

</body>

</html>

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; }

@-moz-keyframes moveH { 0% { left:0px; } 100% { left:900px; } }

@-moz-keyframes moveV { 0% { top:0px; } 100% { top:300px; } }

div.bell {visibility:hidden; color:blue; width:200; -moz-animation: ring2 4s ease-in-out infinite;}@-moz-keyframes 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; }@-moz-keyframes 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: http://www.w3.org/TR/2002/WD-css3-background-20020802/• 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 http://www.cs.ucc.ie/j.bowen/cs4506/slides/background-size1.html

• 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 http://www.cs.ucc.ie/j.bowen/cs4506/slides/background-size2.html

• 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:

http://www.cs.ucc.ie/j.bowen/cs4506/slides/butterfly.html• 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

<!doctype html><html><head><title>Flying butterfly animation</title><style>.butterfly {height: 100px; width: 100px;position:relative; background: url(butterfly.jpg) 50% no-repeat; }

@-moz-keyframes flap

{ 0% {background-size:100px 100px;} 100% {background-size: 100px 20px;} }

@-moz-keyframes turn

{ 0% {-moz-transform:rotate(0deg); } 100% {-moz-transform:rotate(45deg); } }

@-moz-keyframes move { 0% {left:0px } 100% {left:500px } }

</style></head><body>

<div class="butterfly"

style=" -moz-animation: flap 500ms linear infinite,

turn 2s linear alternate infinite,

move 5s linear infinite; ">

</div>

</body></html>

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:

http://www.cs.ucc.ie/j.bowen/cs4506/slides/butterfly2.html• 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


http://www.cs.ucc.ie/j.bowen/cs4506/slides/butterfly3.html• 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

<!doctype html><html><head><title>Flying butterfly animation</title><style>body {background-image: url('flower.jpg'); background-size:cover; }.butterfly {height: 100px; width: 100px;position:relative; background: url(butterflyCartoon.png) 50% no-repeat; }











</div>

</body></html>

Animating over content with absolute positioning• Images with transparency can also be safely

animated over page content that is located using absolute positioning


http://www.cs.ucc.ie/j.bowen/cs4506/slides/butterfly4.html• The butterfly can be safely animated over the

text on the page

Animating over content with absolute positioning (contd.)

<!doctype html><html><head><title>Flying butterfly animation</title><style>body {background-image: url('flower.jpg'); background-size:cover; }.butterfly {height: 100px; width: 100px;position:relative; background: url(butterflyCartoon.png) 50% no-repeat; }







<div style="position:absolute; color:white; font-size:50pt">Watch</div>





</div>

</body></html>

Animating a canvas element• View this animation in a -moz- browser: http://www.cs.ucc.ie/j.bowen/cs4506/slides/rotatingCanvasAnimation.html• 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.)

<! DOCTYPE html><html> <head><title>Rotating canvas</title><style>#canvas {-moz-animation:turn 2s infinite}@-moz-keyframes turn { 0% {-moz-transform: rotate(0deg); } 100% {-moz-transform: rotate(360deg); } }</style></head><body> <canvas id="canvas" width="400" height="400"></canvas><script> 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);</script></body></html>

Motivating example: underwater scuba-diver• View this animation in a -moz- or -webkit- browser: http://www.cs.ucc.ie/j.bowen/cs4506/slides/diving/g0/diver.html• The diver falls through the seascape

underwater scuba-diver (contd.)

HTML file

<html> <head> <title>Diver</title> <link rel="stylesheet" href="diver.css"> </head> <body> <div style="height:100"> Watch the diver </div> <div id="underwater"> <div> <img src="diver.png"> </div> </div> </body></html>

CSS stylesheet

#underwater {... }

#underwater > div { ... }

#underwater > div > img { ... }

@-webkit-keyframes ...

@-moz-keyframes ...

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; }

@-webkit-keyframes dive

{ 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } }

@-moz-keyframes 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: http://www.cs.ucc.ie/j.bowen/cs4506/slides/diving/g1/diver.html• 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;


background: url('seascape.jpg') no-repeat top left;

overflow : hidden;

}

#underwater > div










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: http://www.cs.ucc.ie/j.bowen/cs4506/slides/diving/g2/diver.html• 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

<html> <head> <title>Diver created with Javascript</title> <link rel="stylesheet" href="diver.css"> <script src="diver.js" type="text/javascript"></script> </head> <body> <div style="height:100">A diver will be created with Javascript</div> <div id="underwater"></div> </body></html>

Contents of diver.css are the same as before




overflow : hidden;

}

#underwater > div










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 stylesheetfunction 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:

http://www.cs.ucc.ie/j.bowen/cs4506/slides/diving/g3/diver.html

• 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

<html>

<head>

<title>Diver created with Javascript</title>

<link rel="stylesheet" href="diver.css">

<script src="diver.js" type="text/javascript"></script>

</head>

<body>

<div style="height:100">A diver will be created with Javascript</div>

<div id="underwater"></div>

</body>

</html>

The default position for the diver is no longer specified in diver.css




overflow : hidden;

}

#underwater > div

{ width: 100px; height: 100px; position: absolute;

/* top:-100px; left:250px; */









The default diver position is now specified in diver.js

function init()



envelope.appendChild(someDiver); }

function newDiver()





diverDiv.style.top = "-100px";

diverDiv.style.left = '250px';

return diverDiv; }


Randomizing the default position for the diver



• 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



<html>

<head>




</head>

<body>

<div style="height:100">A diver will be created with Javascript</div>


</body>

</html>

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;



overflow : hidden;

}

#underwater > div










The default diver position is now randomfunction init()



envelope.appendChild(someDiver);

}

function randomInteger(lower,upper)

{ return lower + Math.round(Math.random() * (upper-lower)); }

function newDiver()






diverDiv.style.left = randomInteger(100,400)+'px';

return diverDiv; }


Creating multiple divers with random default positions



• 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

<html>

<head>




</head>

<body>

<div style="height:100">Several divers will be created with Javascript</div>


</body>

</html>




overflow : hidden;

}

#underwater > div










A for-loop is used to create multiple diversconst NUMBER_OF_DIVERS = 3;

function init()


var someDiver;

for (var i = 0; i < NUMBER_OF_DIVERS; i++)

{ someDiver=newDiver();


}function randomInteger(lower,upper)


function newDiver()







return diverDiv; }


Creating multiple divers with random appearances



• 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




overflow : hidden;

}

#underwater > div










A random integer is used to choose each diver's imageconst NUMBER_OF_DIVERS = 3;

function init()


var someDiver;


{ someDiver=newDiver();


}



function newDiver()



image.src = 'diver'+randomInteger(1,3)+'.png'; diverDiv.appendChild(image);



return diverDiv; }


Choosing randomly among multiple animations



• 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 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; }


@-webkit-keyframes dive1 { 0% { -webkit-transform: rotate(90deg) translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } }

@-moz-keyframes dive1 { 0% { -moz-transform: rotate(90deg) translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

@-webkit-keyframes dive2 { 0% { -webkit-transform: scale(-1,1) translate(0px, 0px); } 100% { -webkit-transform: scale(-1,1) translate(0px, 750px); } }

@-moz-keyframes dive2 { 0% { -moz-transform: rotate(90deg) translate(0px, -50px); } 100% { -moz-transform: scale(-1,1) translate(0px, 750px); } }

@-webkit-keyframes dive3 { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } }

@-moz-keyframes dive3 { 0% { -moz-transform: translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

A random integer is used to choose each diver's animationconst NUMBER_OF_DIVERS = 3;

function init()


var someDiver;


{ someDiver=newDiver(); envelope.appendChild(someDiver); }

}



function newDiver()



image.src = 'diver'+randomInteger(1,3)+'.png';




diverDiv.style.webkitAnimationName = 'dive'+randomInteger(1,3);

diverDiv.style.MozAnimationName = 'dive'+randomInteger(1,3); /*Note the Moz*/

return diverDiv; }


Controlling the animations with Javascript



• 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

<html> <head> <title>User-control of animation</title> <link rel="stylesheet" href="diver.css"> <script src="diver.js" type="text/javascript"></script> </head> <body> <div style="height:100">You can pause and resume the animation</div> <div id="underwater"></div> <button type="button" id="button1">Pause</button> <button type="button" id="button2">Resume</button> </body></html>

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; }


@-webkit-keyframes dive1 { 0% { -webkit-transform: rotate(90deg) translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } }

@-moz-keyframes dive1 { 0% { -moz-transform: rotate(90deg) translate(0px, -50px); } 100% { -moz-transform: translate(0px, 750px); } }

@-webkit-keyframes dive2 { 0% { -webkit-transform: scale(-1,1) translate(0px, 0px); } 100% { -webkit-transform: scale(-1,1) translate(0px, 750px); } }

@-moz-keyframes dive2 { 0% { -moz-transform: rotate(90deg) translate(0px, -50px); } 100% { -moz-transform: scale(-1,1) translate(0px, 750px); } }

@-webkit-keyframes dive3 { 0% { -webkit-transform: translate(0px, 0px); } 100% { -webkit-transform: translate(0px, 750px); } }

@-moz-keyframes 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'; } }


CSS animations CSS transitions can be regarded as simple animations, –where we have only two...

Documents

Transcript of CSS animations CSS transitions can be regarded as simple animations, –where we have only two...