1 / 94

Animation in HTML

Animation in HTML. 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

estralita-mendez
Télécharger la présentation

Animation in HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Animation in HTML

  2. 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

  3. An example animation • Consider this HTML page http://www.cs.ucc.ie/j.bowen/cs4506/slides/canvasDiving/g16/main.html • It was written using the canvas element in HTML5 and JavaScript • The source code for the page is very short • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas example</title> <script src="dramatics.js" type="text/javascript"></script> <script src="main.js" type="text/javascript"></script> </head> <body> <canvas id="myCanvas" width="500px" height="650px" style="border:solid 1px #ccc;"> Your browser does not support the canvas element </canvas> <audio> <source src="scream.wav" type="audio/wav" /> Your browser does not support the audio element. </audio> <audio> <!-- 9.5 seconds long --> <source src="jaws.wav" type="audio/wav" /> Your browser does not support the audio element. </audio> </body> </html> • 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

  4. CSS Transitions

  5. CSS transitions • CSS transitions provide a way to achieve simple animations of CSS properties Reference: http://www.w3.org/TR/css3-transitions/ • We will consider CSS transitions now • (A more sophisticated CSS animations using the @keyframes rule is possible, but that ie beyond our scope today)

  6. 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 <html> <head> <style> div { width:200px; background-color:pink; font-size:10 } div:hover { width:400px; background-color:yellow; font-size:100 } </style> </head> <body> <p>This is a paragraph.</p> <div>Hello</div> </body> </html>

  7. 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

  8. 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 <html><head><style> 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 } </style></head><body><p>This is a paragraph.</p><div>Hello</div></body></html>

  9. 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 */

  10. 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

  11. 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 thecubic 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) http://www.cs.ucc.ie/j.bowen/cs4506/slides/css-bezier-builder.html

  12. 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 http://www.cs.ucc.ie/j.bowen/cs4506/slides/cubic-bezier-transition.html <html><head><style> 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;} </style></head><body><p>This is a paragraph.</p><div>Hello</div> </body> </html>

  13. Transitions can control transforms as well as styles • This example is at http://www.cs.ucc.ie/j.bowen/cs4506/slides/transform-transition.html • The transform and three style properties transition gradually, over 15 secs, when the mouse is held over the initial position of the div element <html><head><style> 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);} </style></head><body><p>This is a paragraph.</p><div>Hello</div></body></html>

  14. 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 http://www.cs.ucc.ie/j.bowen/cs4506/slides/transition-delay.html <html><head><style> 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;} </style> </head><body><h1>Transition delay</h1> <p>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 <div>Hello</div></body></html> • 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

  15. 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/

  16. 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

  17. 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; } div {background-color:red; font-size:10px} </style></head><body><div>Hello</div></body></html>

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

  19. 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>, ... }

  20. 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 } }

  21. The animation-iteration-count property • The animation-iteration-countproperty 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

  22. 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; } div {background-color:red; font-size:10px} </style></head><body><div>Hello</div></body></html>

  23. The animation-timing-function property • The animation-timing-function property is a bit like thetransition-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

  24. The animation-timing-function property • The animation below is at http://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>

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

  26. 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>

  27. 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

  28. 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

  29. 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>

  30. 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); } }

  31. 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

  32. animation-direction 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/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

  33. 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>

  34. 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>

  35. 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>

  36. 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)

  37. 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>

  38. 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>

  39. 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;

  40. Theanimation-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

  41. Using theanimation-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>

  42. Theanimation-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-modeproperty • backwards - the animation will apply the property values defined in its 0% keyframe as soon as the animation is applied, during the period defined byanimation-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

  43. 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

  44. 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> <html><head><title>Ding-dong bell</title> <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>

  45. 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; } @-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); } }

  46. 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

  47. Simultaneous animations (contd.) • The only change to the HTML page is to make it refer to a different external stylesheet <!DOCTYPE html> <html><head><title>Ding-dong bell</title> <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>

  48. 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); } }

  49. 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 autokeeps 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

  50. 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.

More Related