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.h tml • Reference http://www.w3.org/TR/css3-animations/
80
Embed
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,
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
• 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
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
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
<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%
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)
• 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
• 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>
<html><head><title>Ding-dong bell</title>
<link rel="stylesheet" href="movingBell1.css" />
</head>
<body>
<h1>Watch the bell ring while moving sideways</h1>
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; }
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;
style=" -moz-animation: flap 500ms linear infinite,
turn 2s linear alternate infinite,
move 5s linear infinite; ">
</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
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
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;
border: solid 1px black;
background: url('seascape.jpg') no-repeat top left;
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>
• 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:
<div style="height:100">A diver will be created with Javascript</div>
<div id="underwater"></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;
border: solid 1px black;
background: url('seascape.jpg') no-repeat top left;
<div style="height:100">Several divers will be created with Javascript</div>
<div id="underwater"></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;
border: solid 1px black;
background: url('seascape.jpg') no-repeat top left;
<div style="height:100">Several divers will be created with Javascript</div>
<div id="underwater"></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;
border: solid 1px black;
background: url('seascape.jpg') no-repeat top left;
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'; } }