Phát triển ứng dụng Web (COMP1027) Phát triển ứng dụng Web (COMP1027) CSS3 CSS3

GV: Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM

Outline Outline

Introduction

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

HTML5/CSS3 HTML5/CSS3 Introduction CSS3 Introduction CSS3

Cascading Style Sheets 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 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 – ;

HTML5/CSS3 HTML5/CSS3 CSS3 Selector CSS3 Selector

ELEMENT SELECTORS ELEMENT SELECTORS

• A:link • A:visited • A:active

• * • UL • UL LI • UL > LI • UL + LI • UL ~ LI

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 • #id

UL:first-of-type UL:last-of-type UL:only-of-type

• UL:empty • UL:hover • UL:focus • UL:target • UL:enabled • UL:disabled • UL:checked • UL.warning

• UL[foo] • UL[foo="bar"] • UL[foo^="bar"] • UL[foo$="bar"] • UL[foo*="bar"] • UL[foo~="bar"] • UL[foo|="en"]

UL::before UL::after UL::first-line UL::first-letter • UL:not(s)

Các ký hiệu thường dùng 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

new selectors new selectors

:first-child :first-child

:root

:last-child :last-child

:nth-child

:only-child :only-child

:nth-last-child

:first-of-type :first-of-type

:nth-of-type

:last-of-type :last-of-type

:nth-last-of-type

:empty :empty

::first-line

:not :not

::first-letter

notnot

• X:not(selector): áp dụng cho X, ngoại trừ

selector div:not(#container) {

color: blue;

} *:not(p) {

color: green;

}

X::pseudoElement 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

X:nth-child(n) 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

X:nth-last-child(n) X:nth-last-child(n)

• Ví dụ:

li:nth-last-child(2) {

color: red;

}

X:nth-of-type(n) 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)

first-child, last-child first-child, last-child

• X:first-child ul li:first-child {

border-top: none;

}

• X:last-child

X:only-child 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;

}

X:only-of-type 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

Vấn đề khác trong Form 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;

}

HTML5/CSS3 HTML5/CSS3 CSS3 Rounded Corners CSS3 Rounded Corners

Create Rounded Corners Create Rounded Corners

border -*-*-radius: [x] [y]?

x = horizontal radius [ | <%> ] y = vertical radius [ | <%> ]

border-top-right-radius: x y;

border-top-left radius: x y;

border-bottom-left-radius: x y;

border-bottom-right-radius: 0;

Create Rounded Corners 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 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 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

}

HTML5/CSS3 HTML5/CSS3 CSS3 Shadow CSS3 Shadow

CSS3 Shadows - Recap 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 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 Text Shadow

• Can be added outside the graphic • No IE support • Format:

text-shadow: x y b color

• x = horizontal offset (cid:1) x < 0: left of the text (cid:1) x > 0: right of the text

• y = vertical offset

(cid:1) y < 0: above the text (cid:1) y > 0: below the text

• b = blur radius

CSS3 Text Effects CSS3 Text Effects

• text-shadow

– text-shadow: x y b color – text-shadow: 5px 5px 5px #FF0000;

• word-wrap: normal/break-word

Text Overflow Text Overflow

• Supported in Internet Explorer (+ other

browsers)

• Example

overflow:visible overflow:hidden

Text Overflow - Recap 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 Word Wrap

• Force a line break even with a long word • Format: word-wrap: break-word|normal;

HTML5/CSS3 HTML5/CSS3 CSS3 Border and Background CSS3 Border and Background

CSS3 Border Images CSS3 Border Images

• You can now specify an image to be used as

part of the border property.

• Example

CSS3 Border Images - Recap 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 BORDERS AND BACKGROUNDS

(cid:1) Border Image

• Round Corners

border-image: url("border.png") 27 round stretch;

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: url(border.png) 27 27 27 27 stretch stretch;

CSS3 Backgrounds 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 Multiple background images

background: , , , ;

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

HTML5/CSS3 HTML5/CSS3 CSS3 Multi-Column Layout CSS3 Multi-Column Layout

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

}

HTML5/CSS3 HTML5/CSS3 CSS3 Font CSS3 Font

CSS3 Font Faces 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 CSS3 Fonts

font-stretch

• @font-face:

– hỗ trợ hầu hết các trình duyệt – Định nghĩa font mới (kèm file)

normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded

• VD:

font-style

normal italic oblique

– @font-face

font-weight

{

font-family: myFirstFont; src: url(sansation_light.woff); /*định nghĩa thêm cho font nếu có*/

}

normal bold 100 200 300 400 500 600 700 800 900

div {

font-family: myFirstFont;

}

HTML5/CSS3 HTML5/CSS3 CSS3 Gradient Buttons CSS3 Gradient Buttons

Create 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 Trình duyệt hỗ trợ CSS 2D Transforms

CSS 2D transforms CSS 2D transforms • Có 2 thuộc tính mới:

• Ví dụ sử dụng thuộc tính - rotation

transform transform-origin

Hello

CSS3 Transform 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 CSS 2D transformation function

(cid:1) rotate() - specifies rotation by the angle given (cid:1) translateX()

(cid:1) specifies a translation by the given amount in the X direction

(cid:1) translateY()

(cid:1) specifies a translation by the given amount in the Y direction (cid:1) translate([, ]) - specifies translation by the vector [trX,trY]; if

tY is not given, zero is used

vector; if second parameter not given, a value equal to the first is used

(cid:1) scale([, ]) - specifies scaling by the [sx,sy] scaling

(cid:1) scaleX() - specifies by the [sx,1] scaling vector (cid:1) scaleY() - specifies by the [1,sY] scaling vector (cid:1) skewX() - specifies skewing along X axis by given angle (cid:1) skewY() - specifies skewing along Y axis by given angle (cid:1) matrix(, , , , , ) - specifies application of

(cid:1) Tham khảo: http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/

the transformation matrix [n1,n2,n3,n4,n5,n6]

Ví dụ CSS 2D transformations Ví dụ CSS 2D transformations

Hello

Ví dụ sử dụng thuộc tính transform-origin Ví dụ sử dụng thuộc tính transform-origin

This is a paragraph

Hello

This is a paragraph

Hello

Trình duyệt hỗ trợ CSS 3D Transforms Trình duyệt hỗ trợ CSS 3D Transforms

• http://www.w3schools.com/css3/css3_3dtransforms.asp • 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 Exercise CSS3 3D Transform

• http://desandro.github.com/3dtransforms • http://css3.bradshawenterprises.com/transforms/

#cube3d

• http://html5rubik.com/tutorial

CSS Transitions

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: http://www.w3.org/TR/css3-transitions

VD CSS phản hồi người dùng 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ó.

This is a paragraph.

Hello

Gradual change in response to user actions (contd.) 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

This is a paragraph.

Hello

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;

Transition-property 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) 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

length

margin-bottom, margin-left, margin-right, margin-top

max-height length, percentage

max-width length, percentage

Transition-property (cont) 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) Transition-property (cont)

Property name Type

top length, percentage

vertical-align keywords, length, percentage

visibility visibility

length, percentage width

word-spacing length, percentage

z-index integer

Zoom number

Varying transition speed 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 */

Giá trị thuộc tính transition-timing-function Giá trị thuộc tính transition-timing-function

• linear – tốc độ giống nhau từ bắt đầu (cid:1) kết thúc • ease – bắt đầu chậm, tăng dần, kết thúc chậm • ease-in – bắt đầu chậm • ease-out – kết thúc chậm • ease-in-out – giống ease

Transitions can control transforms as well as styles 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

This is a paragraph.

Hello

The transition-delay property 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

Transition delay

Note that, if you hover your mouse over the pink box below, the transition will not start for 10 seconds and will then last for 15 seconds

Hello

• A transition-delay can have a negative value

Example: if the delay above were -10s, the transition would start

immediately, the box having a width as if the transition has started 10s before, and would then spend 5s more to finish the width change

Ví dụVí dụ

• http://sothichweb.com/Demos/Demo_CSS3_tran

sform_transition.html • http://ntuts.com/css3

CSS3 animation

CSS animations 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/

CSS transitions versus animations: part 1, a transition CSS transitions versus animations: part 1, a transition

• Consider the CSS transition below:

Transition versus</p> <p>Animation

Hello

html>

• When the mouse moves onto the div element,

the font-size increases gradually

– first keyframe has font-size=10px – last keyframe has font-size=50px

• This is a simple 8-second animation whose

• Contrast this with the situation on the next slide

CSS transitions versus animations: part 2, an animation CSS transitions versus animations: part 2, an animation

•

In contrast with the transition, this 8- second CSS animation has five keyframes – which deliberately produce a very jerky,

coming-and-going movement

Transition versus</p> <p>Animation

Hello

html>

Writing a basic CSS animation Writing a basic CSS animation

• CSS animations can have multiple properties • However, to animate a HTML element using CSS, we must, at least,

animation-name: ; animation-duration: ; ...

}

(cid:1) associate the element with a set of keyframes, and (cid:1) specify the duration of the desired animation (cid:1) Format: { ...

(cid:1) Note that, at present, browser implementations of CSS animation require the

use of vendor-specific prefixes to the relevant CSS properties

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;

}

(cid:1) Example div:hover { font-size:50px

Writing a basic CSS animation (contd.) Writing a basic CSS animation (contd.)

• We specify a set of frames by using the @keyframes rule @keyframes { , , ... }

• Since, at present, we must use vendor-specific prefixes, we must

actually write something like this

@keyframes { , , ... }

@-moz-keyframes {, , ... } @-webkit-keyframes {, , ...} @-ms-keyframes {, , ... } @-o-keyframes {, , ... }

Writing a basic CSS animation (contd.) Writing a basic CSS animation (contd.)

• We specify an individual keyframe by specifying

– the point in the animation when it must be used, and – the CSS style values which should apply at this point

{ , , ... }

Example

• We can combine several keyframes, by using a list of times, for

example

0% { font-size: 10px }

@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

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

Transition versus Animation

Hello

The animation-timing-function property 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-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

Transition versus Animation

Hello

animation-timing-function property: local versus global 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.) 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

Continuous Animation Well,

Hello

Animation activation without user interaction 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

• 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

– the bell will rotate – text representing the sound of the bell will appear and rotate

Simple example of automatic animation activation 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

Simple example of automatic animation activation (contd.) Simple example of automatic animation activation (contd.)

• The div is initially hidden but is then subjected to a 4-second animation which is repeated forever

Ding-dong bell

Please wait a moment - the bell will ring ...

Ding dong

•

Simple example of automatic animation activation (contd.) 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 Reminder: the CSS positioning properties

• The position property specifies how the appropriate locations for elements

should be computed. – There are five possible values

the flow of material onto the page

• static - this is the default; a statically positioned element is placed according to its arrival in

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

• fixed - an element with fixed position is placed relative to the browser window; It will not

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

animation-direction property, example 1 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

Hello

animation-direction property, example 2 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

Hello

animation-delay property animation-delay property

•

Hello

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

Animating with the z-index property 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)

Animating with the z-index property, example 1 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

Hello

Goodbye

Animating with the z-index property, example 2 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

Hello

Goodbye

The animation property 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 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 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

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

Hello

moves the house to the left, to keep it hovering the div

The animation-fill-mode property 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 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.) 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 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; }

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

@-moz-keyframes ring { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); }

Simultaneous animations 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

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

Simultaneous animations (contd.) 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 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); } }