Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 5: CSS3

1Phát triển ứng dụng Web (COMP1027) 
CSS3
GV: Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM
Outline
1. Introduction
2. Selector
3. Create Rounded Corners
4. Drop Shadow
5. Create Gradient Buttons
6. Multiple background images
7. Multi-Column Layout
8. Tranform
9. Transition
10.Animation
3HTML5/CSS3
Introduction CSS3
Cascading Style Sheets
• Developed to enable the separation of document 
content from document presentation
• Initial release in 1996 (CSS1)
• CSS2 published as a recommendation in May 
1998
• CSS2.1 goes to candidate recommendation 
status – July 19 2007
• CSS Level 3 under development since Dec 15, 
2005 (W3C CSS3 Progress Report)
CSS3 FYI
• CSS3 is still under development
• Modules: A new approach to standardization
• Each browser still implementing slightly different 
syntax for certain properties:
– moz – ; //Firefox
– webkit – ; //Chrome, Safari (webkit)
Opera (in most cases) uses the default with no prefix 
but in some cases you will see 
– o – ; 
6HTML5/CSS3
CSS3 Selector
ELEMENT SELECTORS
• *
• UL
• UL LI
• UL > LI
• UL + LI
• UL ~ LI
• #id
• UL[foo]
• UL[foo="bar"]
• UL[foo^="bar"]
• UL[foo$="bar"]
• UL[foo*="bar"]
• UL[foo~="bar"]
• UL[foo|="en"]
• UL:not(s)
• A:link
• A:visited
• A:active
• UL:empty
• UL:hover
• UL:focus
• UL:target
• UL:enabled
• UL:disabled
• UL:checked
• UL.warning
UL:nth-child(n)
UL:nth-last-child(n)
UL:nth-of-type(n)
UL:nth-last-of-type(n)
UL:first-child
UL:last-child
UL:only-child
UL:first-of-type
UL:last-of-type
UL:only-of-type
UL::before
UL::after
UL::first-line
UL::first-letter
Các ký hiệu thường dùng
• *: Áp dụng cho tất cả
* {
margin: 0;
padding: 0;
}
• #: Áp dụng cho đối tượng có ID
• .name: Áp dụng cho đối tượng có class
• X Y: áp dụng cho đối tượng Y nằm trong đối 
tượng X
• X > Y: chỉ rõ con trực tiếp
8
new selectors
:root
:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
::first-line
::first-letter
:first-child
:last-child
:only-child
:first-of-type
:last-of-type
:empty
:not
not
• X:not(selector): áp dụng cho X, ngoại trừ 
selector
div:not(#container) {
color: blue;
}
*:not(p) {
color: green;
}
10
X::pseudoElement
• Ví dụ:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
• Áp dụng cho dòng đầu tiên
• Tương tự cho ::first-letter
11
X:nth-child(n)
• Ví dụ:
li:nth-child(3) {
color: red;
}
• Áp dụng cho con thẻ li thứ 3 trong danh sách.
• Demo: Bảng có dòng chẵn lẻ CSS khác nhau
12
X:nth-last-child(n)
• Ví dụ:
li:nth-last-child(2) {
color: red;
}
13
X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
• Áp dụng cho thẻ ul thứ 3
• Tương tự cho X:nth-last-of-type(n)
14
first-child, last-child
• X:first-child
ul li:first-child {
border-top: none;
}
• X:last-child
15
X:only-child
• Áp dụng cho đối tượng X có duy nhất 1 con
• Ví dụ:
div p:only-child {
color: red;
}
16
X:only-of-type
• Ví dụ:
li:only-of-type {
font-weight: bold;
}
• Áp dụng cho đúng một đối tượng X duy nhất
• Tương tự cho X:first-of-type
17
Vấn đề khác trong Form
E[attr*=val]: áp dụng cho thẻ E thuộc tính attr bằng val
form input[type="text"] {
border: 1px solid #333;
padding: 0.2em;
width: 400px;
}
form .button {
border: 1px solid #333;
background-color: #eee;
color: #000;
padding: 0.1em;
} 
18
19
HTML5/CSS3
CSS3 Rounded Corners
Create Rounded Corners
x = horizontal radius [ | ]
y = vertical radius [ | ]
border-top-left radius: x y; border-top-right-radius: x y; 
border-bottom-left-radius: x y; border-bottom-right-radius: 0;
border -*-*-radius: [x] [y]? 
Create Rounded Corners
border-radius: [x] {1,4} [ / [y] {1,4} ]?
border-radius: 5px 10px 10px 10px / 10px 10px 5px 5px;
border-radius: 5px 10px / 10px;
border radius: 10px;
Create Rounded Corners
W3C Specification Mozilla Implementation
border-radius -moz-border-radius
border-top-left-radius -moz-border-radius-topleft
border-top-right-radius -moz-border-radius-topright
border-bottom-right-radius -moz-border-radius-bottomright
border-bottom-left-radius -moz-border-radius-bottomleft
Safari and Chrome:
V3.0: use -webkit- prefix
CSS3 Rounded Corners - Recap
• Makes creating rounded divs a breeze
• No Internet Explorer support but it degrades 
gracefully
• Markup:
.div2
{
width:300px;
height:300px;
border: 3px solid #000;
background:#cc0000;
border-radius:30px;
-moz-border-radius:30px; //Prefix to make this work in Firefox
-webkit-border-radius:30px; //Prefix to make this work in webkit browsers
}
24
HTML5/CSS3
CSS3 Shadow
CSS3 Shadows - Recap
• Once again no IE support
• Format: 
box-shadow: h-shadow v-shadow blur spread color inset;
• h-shadow == Position of horizontal shadow
• v-shadow == Position of vertical shadow
• Blur == Blur distance
• Spread == Size of shadow
• Color == Shadow Color
• Inset == Make the shadow an inner (shadow)
CSS3 Shadows
box-shadow: x y b color
Examples:
-webkit-box-shadow: -3px 3px 3px #999999; 
-moz-box-shadow: -3px 3px 3px #999999; 
text-shadow: -4px 4px 3px #999999;
Text Shadow
• Can be added outside the graphic
• No IE support 
• Format: 
text-shadow: x y b color
• x = horizontal offset 

 x < 0: left of the text

 x > 0: right of the text
• y = vertical offset 

 y < 0: above the text

 y > 0: below the text
• b = blur radius
CSS3 Text Effects
• text-shadow
– text-shadow: x y b color
– text-shadow: 5px 5px 5px #FF0000;
• word-wrap: normal/break-word
28
Text Overflow
• Supported in Internet Explorer (+ other 
browsers)
• Example
overflow:visible overflow:hidden
Text Overflow - Recap
• Format: text-overflow: clip | ellipsis | string;
• Also requires the whitespace:nowrap; & 
overflow:hidden properties to be set.
• Sample Markup:
#div1
{ width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
Word Wrap
• Force a line break even with a long word
• Format: 
word-wrap: break-word|normal;
32
HTML5/CSS3
CSS3 Border and Background
CSS3 Border Images
• You can now specify an image to be used as 
part of the border property.
• Example
CSS3 Border Images - Recap
• Format: 
border-image: source slice width outset repeat;
• Markup: 
border-image: url(borderbg.jpg) 30 30 repeat;
-webkit-border-image: url(borderbg.jpg) 30 30 repeat;
-moz-border-image: url(borderbg.jpg) 30 30 repeat;
BORDERS AND BACKGROUNDS
• Round Corners
border-radius: 4em;
border-top-left-radius: 4em;
border-top-right-radius: 4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 4em;
• Eliptical Corners

 Border Image
border-image: url("border.png") 27 round stretch;
border-image: url(border.png) 27 27 27 27 stretch stretch;
CSS3 Backgrounds
• Format: background-size: length | percentage | 
cover | contain;
• Sample Markup:
background-size: 400px 500px; //width, height
background-size:30% 40%; //width, height
background-size:100%; //Omitting first value sets 
//the second to auto
background-size:cover;
background-size:contain;
Multiple background images
background:
 ,
 ,
 ,
 ; 
OR
background-image: , , , ;
background-repeat: , , ,;
background-position: , , ,;
/* plus any background attachment and/or box properties as needed */
#example {
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), 
url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}
39
HTML5/CSS3
CSS3 Multi-Column Layout
Multi-Column Layout
#multi-column {
/* For Mozilla: */ 
-moz-column-width: 13em; 
-moz-column-gap: 1em;
/* For WebKit: */ 
-webkit-column-width: 13em; 
-webkit-column-gap: 1em;
}
Multi-Column Layout
#multi-column { 
-moz-column-count: 3; 
-moz-column-gap: 1em; 
-moz-column-rule: 1px solid black; 
-webkit-column-count: 3; 
-webkit-column-gap: 1em; 
-webkit-column-rule: 1px solid black;
}
42
HTML5/CSS3
CSS3 Font
CSS3 Font Faces
• Allows you to use non-standard fonts
• Mixed support for otf, ttf, svg and eot
• Internet Explorer only supports EOT
• Mozilla browsers support OTF and TTF
• Safari and Opera support OTF, TTF and SVG
• Chrome supports TTF and SVG.
CSS3 Fonts
• @font-face: 
– hỗ trợ hầu hết các trình duyệt
– Định nghĩa font mới (kèm file)
• VD:
– @font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
/*định nghĩa thêm cho font nếu có*/
}
div
{
font-family: myFirstFont;
} 44
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
font-style normal
italic
oblique
font-weight normal
bold
100
200
300
400
500
600
700
800
900
45
HTML5/CSS3
CSS3 Gradient Buttons
Create Gradient Buttons
• rgba(r, g, b, opacity)
• background:-webkit-gradient(linear,0% 0%,0% 100%, 
from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
• background:-moz-linear-
gradient(top,rgba(255,255,255,1), rgba(185,185,185,1));
CSS3 transforms
Trình duyệt hỗ trợ CSS 2D Transforms
CSS 2D transforms
• Có 2 thuộc tính mới:
transform
transform-origin
• Ví dụ sử dụng thuộc tính - rotation
div { width:200px; height:100px; background-color:red;
transform:rotate(-15deg);
-moz-transform:rotate(-15deg); /* Firefox */
-webkit-transform:rotate(-15deg); /* Chrome, Safari */
-ms-transform:rotate(-15deg); /* IE9 */
-o-transform:rotate(-15deg); /* Opera */ 
}
 Hello
CSS3 Transform
• transform: transform-function;
• Transform-function có thể là:
– Dịch chuyển vị trí (translate)
– Xoay theo góc (rotate)
– Bóp méo (skew)
– Co giản (Chuyển đổi kích thước) theo tỉ lệ (scale)
CSS 2D transformation function

 rotate() - specifies rotation by the angle given

 translateX()

 specifies a translation by the given amount in the X direction

 translateY()

 specifies a translation by the given amount in the Y direction

 translate([, ]) - specifies translation by the vector [trX,trY]; if 
tY is not given, zero is used

 scale([, ]) - specifies scaling by the [sx,sy] scaling 
vector; if second parameter not given, a value equal to the first is 
used 

 scaleX() - specifies by the [sx,1] scaling vector

 scaleY() - specifies by the [1,sY] scaling vector

 skewX() - specifies skewing along X axis by given angle

 skewY() - specifies skewing along Y axis by given angle

 matrix(, , , , , ) - specifies application of 
the transformation matrix [n1,n2,n3,n4,n5,n6]

 Tham khảo: 
Ví dụ CSS 2D transformations
div {
width:200px; height:100px; background-color:red;
transform:rotate(-15deg) translateX(300px);
-moz-transform:rotate(-15deg) translateX(300px);
-webkit-transform:rotate(-15deg) translateX(300px);
-ms-transform:rotate(-15deg) translateX(300px);
-o-transform:rotate(-15deg) translateX(300px);
}
Hello
Ví dụ sử dụng thuộc tính transform-origin
div { width:200px; height:100px; background-color:red;
transform:rotate(-15deg);
-moz-transform:rotate(-15deg);-webkit-transform:rotate(-
15deg);
-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg); 
}
This is a paragraphHello
div { width:200px; height:100px; background-color:red;
transform-origin:top left;
-moz-transform-origin:top left;-webkit-transform-origin:top 
left;
-ms-transform-origin:top left; -o-transform-origin:top left;
transform:rotate(-15deg);
-moz-transform:rotate(-15deg);-webkit-transform:rotate(-
15deg);
-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg); 
}
This is a paragraphHello
Trình duyệt hỗ trợ CSS 3D Transforms
• 
• 3D CSS transforms tương tự như 2D CSS 
transforms. Các thuộc tính cơ bản translate3d, 
scale3d, rotateX, rotateY và rotateZ. translate3d 
và scale3d cần 3 tham số x,y and z; còn rotate 
cần góc.
Exercise CSS3 3D Transform
• 
• 
#cube3d
• 
CSS Transitions
CSS transitions
• Tạo hoạt hình cho một thuộc tính nào đó. 
• Cú pháp:
transition: ‘transition-property’ ‘transition-duration’ 
‘transition-timing-function’ ‘transition-delay’;
• Dạng shorthand của các thuộc tính như:
– transition-property: thuộc tính sẽ áp dụng
– transition-duration: thời gian hoàn thành hiệu ứng tính bằng 
milliseconds
– transition-timing-function: xác định kiểu thời gian thực hiện hiệu 
ứng bao gồm một số giá trị như linear, ease, ease-in, ease-out, 
ease-in-out, và cubic-bezier(n,n,n,n) kiểu thời gian tùy chỉnh với 
n nhận giá trị từ 0 - 1
– transition-delay: thời gian dừng trước khi bắt đầu hiệu ứng tính 
bằng milliseconds.
Tham khảo: 
VD CSS phản hồi người dùng
• Chuyển đổi style của khối div khi 
người dùng hơ chuột vào nó.
div { width:200px; background-color:pink; font-
size:10 }
div:hover { width:400px; background-color:yellow; 
font-size:100 }
This is a paragraph.
Hello
Gradual change in response to user actions (contd.)
• The stylesheet below will cause a gradual transition in style 
for the div element when the user holds his mouse over it
div { width:200px; height:180px; background-color:pink; font-size:10;
transition-property: width, background-color, font-size;
transition-duration: 15s, 15s, 15s;
-moz-transition-property: width, font-size;-moz-transition-duration: 15s, 15s, 15s;
-ms-transition-property: width, font-size;-ms-transition-duration: 15s, 15s, 15s;
-webkit-transition-property: width, font-size;-webkit-transition-duration: 15s, 15s, 15s;
-o-transition-property: width, font-size;-o-transition-duration: 15s, 15s, 15s;
}
div:hover { width:400px; background-color:yellow; font-size:100 }
This is a paragraph.Hello
Transition-property
Property name Type
background-color Color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width Length
border-color Color
border-left-color Color
border-left-width Length
border-right-color Color
border-right-width Length
border-spacing Length
border-top-color Color
border-top-width Length
border-width Length
Transition-property (cont)
Property name Type
Bottom length, percentage
color Color
crop rectangle
font-size length, percentage
font-weight number
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom, 
margin-left,
margin-right,
margin-top
length
max-height length, percentage
max-width length, percentage
Transition-property (cont)
Property name Type
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width Length
padding-bottom Length
padding-left Length
padding-right Length
padding-top Length
right length, percentage
text-indent length, percentage
text-shadow shadow
Transition-property (cont)
Property name Type
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
Zoom number
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-functi ... ated 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 
; it is removed from the normal flow; other elements are placed as if the absolutely 
positioned element does not exist, so it can overlap other elements
• inherit - an element whose position is inherited gets the same location as its parent
• Elements are located using the top, bottom, left, and right properties, but these 
properties will not work unless the position property is set first and the way 
these properties work depends on the value of the position property
• When an element is placed outside the normal flow, it can overlap other 
elements, in which case the z-index property can be used to specify how the 
overlapping elements should be stacked on the page 
animation-direction property
• In the next few slides, we will contrast these two web-
pages in a Mozilla browser
(example 1)
(example 2)
• The default value for animation-direction is normal
which means that the animation should be played as 
specified in the keyframes
• If the value alternate is used for the property, the 
animation should play in reverse on alternate cycles 
animation-direction property, example 1
• In this page, the position, left and top properties are 
used to animate the location of the div element
• The blue div always moves clockwise - see the 5th and 6th
images here
div {width:100px; height:100px; background:blue;
position:relative;
-moz-animation-name:rove; -moz-animation-duration:5s;
-moz-animation-iteration-count:infinite; }
@-moz-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;} }
Hello
animation-direction property, example 2
• In this page, the div alternates between moving clockwise in one 
cycle and counter-clockwise on the next cycle - see the 5th and 
6th images here
div {width:100px; height:100px; background:blue;
position:relative;
-moz-animation-name:rove; -moz-animation-duration:5s;
-moz-animation-iteration-count:infinite; 
-moz-animation-direction:alternate; }
@-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;} }
Hello
animation-delay property
• In this page, the animation of the div element will not start until 
40 seconds after the page is loaded
div {width:100px; height:100px; background:blue; position:relative;
-moz-animation-name:rove; -moz-animation-duration:5s;
-moz-animation-iteration-count:infinite; 
-moz-animation-direction:alternate; -moz-animation-delay:40s;
}
@-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;} }
Hello
Animating with the z-index property
• In the next few slides, we will contrast these two web-
pages in a Mozilla browser
 (example 1)
 (example 2)
Animating with the z-index property, example 1
• In this page, the first (blue) div is continuously 
animated clockwise while the second (red) div is 
statically located
• When the blue div overlaps the red div it 
appears on top
div { width:100px; height:100px; background:red;color:white; }
div.rover {width:100px; height:100px; background:blue;color:white;
position:relative;
-moz-animation-name:rove; -moz-animation-duration:5s;
-moz-animation-iteration-count:infinite; }
@-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;}
}
Hello
Goodbye
Animating with the z-index property, example 2
• Again, the first (blue) div is continuously animated clockwise 
while the second (red) div is statically located
• But this time, the roving div is given a z-index of -1 to make it 
go behind the static div when they overlap 
div { width:100px; height:100px; background:red;color:white; }
div.rover {width:100px; height:100px; background:blue;color:white; z-index:-1; 
position:relative;
-moz-animation-name:rove; -moz-animation-duration:5s;
-moz-animation-iteration-count:infinite; }
@-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;}
}
Hello
Goodbye
The animation property
• The animation property is a shorthand for 
(subsets of) six of the animating properties:
animation-name, animation-duration, animation-timing-
function, animation-delay, animation-iteration-count, 
animation-direction
• Example
animation: rove 5s infinite;
-moz-animation: rove 5s infinite; 
-webkit-animation: rove 5s infinite;
The animation-play-state property
• This property specifies whether the animation is 
running or paused
• It is probably most useful when using JavaScript 
to control a CSS animation
• But the next slide shows that it can also be used 
in other ways
Using the animation-play-state property with a pseudo-class
• This page is at 
• The normal state for the div is that it stays in the top left of the page, 
but
– when the mouse hovers over the div, it starts to move to the left
– however it only moves all the way (900 pixels) to the left if the user also 
moves the house to the left, to keep it hovering the div
div { width:100px; height:100px; background:red; position:relative;
-moz-animation:move 5s; -moz-animation-play-state:paused; }
div:hover { -moz-animation-play-state:running; }
@-moz-keyframes move { 0% { left:0px; } 100% { left:900px; } }
Hello
The animation-fill-mode property
• animation-fill-mode specifies what property values are applied by an animation outside 
the time it is executing 
– By default, an animation will not affect property values between the time it is applied 
(when the animation-name property is set on an element) and the time it begins 
execution (which is determined by the animation-delay property).
– Also, by default, an animation does not affect property values after the animation ends 
(determined by the animation-duration property). 
– The value of animation-fill-mode can override this behavior. 
• Possible values for the animation-fill-mode property
• backwards - the animation will apply the property values defined in its 0% keyframe 
as soon as the animation is applied, during the period defined by animation-delay
• forwards - the animation will apply the property values defined in its last executing 
keyframe after the final iteration of the animation, until the animation style is removed. 
The last executing keyframe is the 100% keyframe unless the animation has 
animation-direction set to alternate and the iteration count is a finite even number, in 
which case it is the 0% keyframe
• both the animation will follow the rules for both ‘forwards’ and ‘backwards’. That is, it 
will extend the animation properties in both directions. 
• none - this is the default value for the property
• animation-fill-mode appears to be supported only by -moz- browsers at present
Nested animations
• View this animation in a -moz- browser:
• The bell rings as we have seen before but, at the same 
time, the bell and ringing text move sideways
• This could be achieved in several ways
– but in this implementation, we achieve it by 
• animating some elements 
• inside another element which is also being animated independently
Nested animations (contd.)
• The bell and ringing text are nested inside another div element
• As we shall see in the stylesheet on the next slide, this envelope is 
animated to move horizontally
– while the bell and ringing text are animated as before
Ding-dong bell
Watch the bell ring while moving sideways
Ding dong
Stylesheet for the nested animations
• The bell and ringing text are nested inside another div element
div.envelope
{ position:relative; 
-moz-animation: moveH 12s alternate infinite; 
}
@-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:
• As before, the bell moves sideways while 
ringing, but
• it also moves vertically
• This could be achieved in several ways
– but in this implementation, we achieve it by applying 
multiple animations to the envelop div
Simultaneous animations (contd.)
• The only change to the HTML page is to make it refer to 
a different external stylesheet
Ding-dong bell
Watch the bell ring while moving sideways
Ding dong
Stylesheet for the simultaneous animations
• Two animations are applied, simultaneously, to the envelope div
div.envelope
{ position:relative; 
-moz-animation: moveH 12s alternate infinite, moveH 12s alternate infinite;
}
@-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); } }
Xem thêm
• 
• 
• 
• 
104
Q & A
THE END