Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 5 - ThS. Lương Trần Hy Hiến

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 • How[r]

Phá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 Introduction Selector Create Rounded Corners Drop Shadow Create Gradient Buttons Multiple background images Multi-Column Layout Tranform Transition 10.Animation HTML5/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 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 – <property> ; //Firefox – webkit – <property>; //Chrome, Safari (webkit) Opera (in most cases) uses the default with no prefix but in some cases you will see – o – <property>; HTML5/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 *{ 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 đối tượng X • X > Y: rõ trực tiếp new selectors :root :first-child :nth-child :last-child :nth-last-child :only-child :nth-of-type :first-of-type :nth-last-of-type :last-of-type ::first-line :empty ::first-letter :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 thẻ li thứ danh sách • Demo: Bảng có dòng chẵn lẻ CSS khác 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ứ • 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ó • 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 đối tượng X • Tương tự cho X:first-of-type 17 Vấn đề khác Form E[attr*=val]: áp dụng cho thẻ E thuộc tính attr 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 HTML5/CSS3 CSS3 Rounded Corners 19 Create Rounded Corners border -*-*-radius: [x] [y]? x = horizontal radius [ <length> | <%> ] y = vertical radius [ <length> | <%> ] border-top-left radius: x y; border-bottom-left-radius: x y; border-top-right-radius: x y; border-bottom-right-radius: 0; 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 } HTML5/CSS3 CSS3 Shadow 24 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; HTML5/CSS3 CSS3 Border and Background 32 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: border-top-right-radius: border-bottom-right-radius: border-bottom-left-radius:
4em; 4em; 4em; 4em; Border Image border-image: url("border.png") 27 round stretch; • Eliptical Corners 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: <image> <position> <size> <repeat> <attachment> <box>, <image> <position> <size> <repeat> <attachment> <box>, <image> <position> <size> <repeat> <attachment> <box>, <image> <position> <size> <repeat> <attachment> <box> <color>; OR background-image: <image>, <image>, <image>, <image>; background-repeat: <repeat>, <repeat>, <repeat>,<repeat>; background-position: <position>, <position>, <position>,<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 CSS3 Multi-Column Layout 39 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; } HTML5/CSS3 CSS3 Font 42 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: 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 – hỗ trợ hầu hết các trình duyệt – Định nghĩa font (kèm file) • VD: – @font-face { font-family: myFirstFont; src: url(sansation_light.woff); /*định nghĩa thêm cho font có*/ } div { font-family: myFirstFont; } 44 HTML5/CSS3 CSS3 Gradient Buttons 45 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-lineargradient(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ó thuộc tính mới: transform transform-origin • Ví dụ sử dụng thuộc tính - rotation <html> <head> <style> 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 */ } </style> </head> <body> <br><br><br> <div>Hello</div> </body> </html> 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(<angle>) - specifies rotation by the angle given
translateX(<translation-value>)
specifies a translation by the given amount in the X direction
translateY(<translation-value>)
specifies a translation by the given amount in the Y direction
translate(<tX>[, <trY>]) - specifies translation by the vector [trX,trY]; if tY is not given, zero is used
scale(<sX>[, <sY>]) - specifies scaling by the [sx,sy] scaling


vector; if second parameter not given, a value equal to the first is used scaleX(<sX>) - specifies by the [sx,1] scaling vector scaleY(<sY>) - specifies by the [1,sY] scaling vector skewX(<angle>) - specifies skewing along X axis by given angle skewY(<angle>) - specifies skewing along Y axis by given angle

matrix(<n1>, <n2>, <n3>, <n4>, <n5>, <n6>) - specifies application of the transformation matrix [n1,n2,n3,n4,n5,n6]
Tham khảo: http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/ Ví dụ CSS 2D transformations <html> <head> <style> 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); } </style> </head> <body> <br><br><br> <div>Hello</div> </body> </html> Ví dụ sử dụng thuộc tính transform-origin <html><head><style> 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); } </style></head><body><p>This is a paragraph</p><div>Hello</div> </body></html> <html><head><style> 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); } </style></head><body><p>This is a paragraph</p><div>Hello</div> </body></html> Trình duyệt hỗ trợ CSS 3D Transforms • http://www.w3schools.com/css3/css3_3dtransforms.asp • 3D CSS transforms tương tự 2D CSS transforms Các thuộc tính translate3d, scale3d, rotateX, rotateY và rotateZ translate3d và scale3d cần tham số x,y and z; còn rotate cần góc Exercise CSS3 3D Transform • http://desandro.github.com/3dtransforms • http://css3.bradshawenterprises.com/transforms/ #cube3d • http://html5rubik.com/tutorial CSS Transitions CSS transitions • Tạo hoạt hình cho thuộc tính nào đó • Cú pháp: transition: ‘transition-property’ ‘transition-duration’ ‘transition-timing-function’ ‘transition-delay’; • Dạng shorthand các thuộc tính như: – transition-property: thuộc tính áp dụng – transition-duration: thời gian hoàn thành hiệu ứng tính milliseconds – transition-timing-function: xác định kiểu thời gian thực hiệu ứng bao gồm số giá trị 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ừ - – transition-delay: thời gian dừng trước bắt đầu hiệu ứng tính milliseconds Tham khảo: http://www.w3.org/TR/css3-transitions VD CSS phản hồi người dùng • Chuyển đổi style khối div người dùng hơ chuột vào nó <html> <head> <style> div { width:200px; background-color:pink; fontsize: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> 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> 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-function: …; /* Firefox */ -webkit-transition-timing-function: …; /* Safari and Chrome */ -o-transition-timing-function: …; /* Opera */ -ms-transition-timing-function: …; /* */ Giá trị thuộc tính transition-timing-function • • • • • linear – tốc độ giống từ bắt đầu
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 • • 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-transitionproperty: -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);-mstransform:rotate(-15deg); -o-transform:rotate(-15deg);} </style></head><body><p>This is a paragraph.</p><div>Hello</div></body></html> 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-transitiondelay: 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 Ví dụ • http://sothichweb.com/Demos/Demo_CSS3_tran sform_transition.html • http://ntuts.com/css3 68 CSS3 animation 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 • Consider the CSS transition below: <!DOCTYPE HTML> <html><head><title>Transition versus Animation</title> <style> div:hover { font-size:50px; transition-duration:8s; -webkit-transition-duration:8s; -moz-transition-duration:8s; -ms-transition-duration:8s; -o-transition-duration:8s; } div {background-color:red; font-size:10px} </style></head><body><div>Hello</div></body></ html> • • When the mouse moves onto the div element, the font-size increases gradually This is a simple 8-second animation whose – first keyframe has font-size=10px – last keyframe has font-size=50px • Contrast this with the situation on the next slide CSS transitions versus animations: part 2, an animation • In contrast with the transition, this 8second 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 } } div:hover { font-size:50px; animation-name: fontChange; animation-duration: 8s; } div {background-color:red; font-size:10px} </style></head><body><div>Hello</div></body></ html> Writing a basic CSS animation • • CSS animations can have multiple properties However, to animate a HTML element using CSS, we must, at least,
associate the element with a set of keyframes, and
specify the duration of the desired animation
Format: <elementSelector> { animation-name: <nameOfSetOfKeyframes>; animation-duration: <someDuration>; }
Note that, at present, browser implementations of CSS animation require the use of vendor-specific prefixes to the relevant CSS properties
Example div:hover { font-size:50px animation-name: myKeyFrameSet; animation-duration: 8s; -moz-animation-name: myKeyFrameSet; -moz-animation-duration: 8s; -webkit-animation-name: myKeyFrameSet; -webkit-animation-duration: 8s; -ms-animation-name: myKeyFrameSet; -ms-animation-duration: 8s; -o-animation-name: myKeyFrameSet; -o-animation-duration: 8s; } Writing a basic CSS animation (contd.) • We specify a set of frames by using the @keyframes rule @keyframes <someName> { <keyframeSpec1>, <keyframe2>, } • Since, at present, we must use vendor-specific prefixes, we must actually write something like this @keyframes <someName> { <keyframeSpec1>, <keyframe2>, } @-moz-keyframes <someName> {<keyframeSpec1>, <keyframe2>, } @-webkit-keyframes <someName> {<keyframeSpec1>, <keyframe2>, } @-ms-keyframes <someName> {<keyframeSpec1>, <keyframe2>, } @-o-keyframes <someName> {<keyframeSpec1>, <keyframe2>, } Writing a basic CSS animation (contd.) • We specify an individual keyframe by specifying – the point in the animation when it must be used, and – the CSS style values which should apply at this point <when> { <styleDeclaration1>, <styleDeclaration1>, } Example 0% { font-size: 10px } • We can combine several keyframes, by using a list of times, for example @keyframes fontChange { 0% { font-size: 10px } 25%,75% { font-size: 300px } 50%,100% { font-size: 50px } • } The keyword from is equivalent to 0% and to is equivalent to 100% @keyframes fontChange{ from { font-size: 10px } 25%,75% { font-size: 300px } 50%, to { font-size: 50px } } The animation-iteration-count property • The animation-iteration-count property specifies how many times the animation is played - the number of 'cycles' • By default, the value of this property is • If the keyword infinite is used, the animation will repeat as long as the web page is open • If a non-integer number is specifies as the value for this property, the animation will stop at some point in the middle of a cycle animation-iteration-count property (contd.) • The animation below is at http://www.cs.ucc.ie/j.bowen/cs4506/slides/infinitelyRepeated8secAnimation.html • • It will repeat continuously, as long as the mouse is hovering over the area of the initial div element It will stop immediately if the mouse moves off the initial area <!DOCTYPE HTML> <html><head><title>Transition versus Animation</title> <style> @keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px } 50% { font-size: 50px }75% { font-size: 300px } 100% { font-size: 50px }} @-moz-keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } }@webkit-keyframes fontChange {0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px }}@-ms-keyframes fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { fontsize: 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> 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 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 } }@-webkitkeyframes fontChange {0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px }}@-mskeyframes fontChange {0% { font-size: 10px }25% { font-size: 300px }50% { font-size: 50px }75% { font-size: 300px }100% { font-size: 50px } }@-okeyframes fontChange {0% { font-size: 10px } 25% { font-size: 300px } 50% { font-size: 50px} 75% { font-size: 300px }100% { font-size: 50px }} div:hover { font-size:50px; animation-name: fontChange; animation-duration: 24s; animation-timing-function: cubic-bezier(.97,.01,.98,.05); -moz-animation-name: fontChange;-moz-animation-duration: 8s; -moz-animation-timing-function: cubic-bezier(.97,.01,.98,.05); -webkit-animation-name: fontChange;-webkit-animation-duration: 8s; -webkit-animation-timing-function: cubic-bezier(.97,.01,.98,.05); -ms-animation-name: fontChange;-ms-animation-duration: 8s; -ms-animation-timing-function: cubic-bezier(.97,.01,.98,.05); -o-animation-name: fontChange;-o-animation-duration: 8s; -o-animation-timing-function: cubic-bezier(.97,.01,.98,.05);} div {background-color:red; font-size:10px} </style></head><body><div>Hello</div></body></html> animation-timing-function property: local versus global • On the last slide, the fontChange animation had a global timing function, which affected all the keframes in the animation • However, we can also have local timing functions inside each keyframe @keyframes fontChange { 0% {font-size: 10px; animation-timing-function: ease-out; } 25% {font-size:300px; animation-timing-function: ease-in; } 50% {font-size: 50px; animation-timing-function: ease-out; } 75% {font-size: 300px; animation-timing-function: ease-in; } 100% {font-size: 50px; } } animation-timing-function property: local versus global (contd.) • The animation below is at http://www.cs.ucc.ie/j.bowen/cs4506/slides/24secAnimationWithTimingFunction.html • Different timing functions are used in the intervals between keyframes <!DOCTYPE HTML> <html><head> <title>Continuous Animation</title> <style> @keyframes fontChange { 0% {font-size: 10px; animation-timing-function: ease-out; } 25% {font-size: 300px; animation-timing-function: ease-in; } 50% {font-size: 50px; animation-timing-function: ease-out; } 75% {font-size: 300px; animation-timing-function: ease-in; } 100% {font-size: 50px} } @-moz-keyframes fontChange {0% {font-size: 10px; -moz-animation-timing-function: ease-out;} 25% {font-size: 300px; -moz-animation-timing-function: easein;}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-timingfunction: 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; -webkitanimation-timing-function: ease-in;} 100% {font-size: 50px} }@-o-keyframes fontChange { 0% {font-size: 10px; -o-animation-timing-function: easeout;}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-timingfunction: ease-out;}25% {font-size: 300px; -moz-animation-timing-function: ease-in;}50% {font-size: 50px; -moz-animation-timing-function: easeout;}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-animationname: fontChange; -o-animation-duration: 24s;-webkit-animation-name: fontChange; -webkit-animation-duration: 24s; } div {background-color:red; font-size:10px} </style> </head> <body>Well,<div>Hello</div></body></html> Animation activation without user interaction • View this web-page in a Mozilla browser: http://www.cs.ucc.ie/j.bowen/cs4506/slides/bell.html • The animation will start automatically – the bell will rotate – text representing the sound of the bell will appear and rotate • You must use a Mozilla browser because, to keep the file short, only the -moz- animation is implemented, – but -webkit- animation could also have been implemented • • However, the functionality cannot yet be provided in -ms- and -obrowsers On the next few slides, we will consider the implementation of a simpler version of this page 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.) • 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% { -moztransform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moztransform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); }23% { -moztransform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); }27% { -moz-transform: rotate(-12deg); } 29% { -moztransform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); }35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); }41% { -moz-transform: rotate(1deg); visibility:hidden; }43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } </style> </head><body> <h1>Please wait a moment - the bell will ring </h1> <div class="dingDong">Ding dong</div> </body></html> Simple example of automatic animation activation (contd.) • • In each cycle, the animated element starts at 0°, rotates for the first 43% of the cycle before coming to rest at 0° and staying there until the end of the cycle Initially, the animated element is hidden, becomes visible at 1% and is hidden again at 41% @-moz-keyframes dingding { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); visibility:visible; } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); visibility:hidden; } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } Reminder: the CSS positioning properties • The position property specifies how the appropriate locations for elements should be computed – There are five possible values • static - this is the default; a statically positioned element is placed according to its arrival in the flow of material onto the page • fixed - an element with fixed position is placed relative to the browser window; It will not move even if the window is scrolled; It is removed from the normal flow; Other elements are placed as if the fixed positioned element does not exist, so it can overlap other elements • relative - A relatively positioned element is moved relative to its normal position in the flow of material onto the page (so it can overlap other elements) but the space reserved for the element in the normal flow is still preserved • absolute - An absolutely positioned element is placed relative to the first parent element that has a position other than static; if no such element is found, the containing block is <html>; it is removed from the normal flow; other elements are placed as if the absolutely positioned element does not exist, so it can overlap other elements • • • inherit - an element whose position is inherited gets the same location as its parent Elements are located using the top, bottom, left, and right properties, but these properties will not work unless the position property is set first and the way these properties work depends on the value of the position property When an element is placed outside the normal flow, it can overlap other elements, in which case the z-index property can be used to specify how the overlapping elements should be stacked on the page animation-direction property • In the next few slides, we will contrast these two webpages 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 • • In this page, the position, left and top properties are used to animate the location of the div element The blue div always moves clockwise - see the 5th and 6th images here <!DOCTYPE html><html><head> <style type="text/css"> div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; } @-moz-keyframes rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } </style></head><body><div>Hello</div></body> </html> animation-direction property, example • In this page, the div alternates between moving clockwise in one cycle and counter-clockwise on the next cycle - see the 5th and 6th images here <!DOCTYPE html><html><head> <style type="text/css"> div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; } @-moz-keyframes rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } </style></head><body><div>Hello</div></body> </html> animation-delay property • In this page, the animation of the div element will not start until 40 seconds after the page is loaded <!DOCTYPE html><html><head> <style type="text/css"> div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-delay:40s; } @-moz-keyframes rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } </style></head><body><div>Hello</div></body> </html> Animating with the z-index property • In the next few slides, we will contrast these two webpages 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 • In this page, the first (blue) div is continuously animated clockwise while the second (red) div is statically located • When the blue div overlaps the red div it appears on top <!DOCTYPE html> <html><head><style> div { width:100px; height:100px; background:red;color:white; } div.rover {width:100px; height:100px; background:blue;color:white; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; } @-moz-keyframes rove { 0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;}100% {left:0px; top:0px;} } </style></head><body> <div class="rover">Hello</div> <div>Goodbye</div> </body> </html> Animating with the z-index property, example • • Again, the first (blue) div is continuously animated clockwise while the second (red) div is statically located But this time, the roving div is given a z-index of -1 to make it go behind the static div when they overlap <!DOCTYPE html> <html><head><style> div { width:100px; height:100px; background:red;color:white; } div.rover {width:100px; height:100px; background:blue;color:white; z-index:-1; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; } @-moz-keyframes rove { 0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;}100% {left:0px; top:0px;} } </style></head><body> <div class="rover">Hello</div> <div>Goodbye</div> </body> </html> The animation property • The animation property is a shorthand for (subsets of) six of the animating properties: animation-name, animation-duration, animation-timingfunction, animation-delay, animation-iteration-count, animation-direction • Example animation: rove 5s infinite; -moz-animation: rove 5s infinite; -webkit-animation: rove 5s infinite; The animation-play-state property • This property specifies whether the animation is running or paused • It is probably most useful when using JavaScript to control a CSS animation • But the next slide shows that it can also be used in other ways Using the animation-play-state property with a pseudo-class • This page is at http://www.cs.ucc.ie/j.bowen/cs4506/slides/animation-play-state.html • The normal state for the div is that it stays in the top left of the page, but – when the mouse hovers over the div, it starts to move to the left – however it only moves all the way (900 pixels) to the left if the user also moves the house to the left, to keep it hovering the div <!DOCTYPE html> <html><head><style> div { width:100px; height:100px; background:red; position:relative; -moz-animation:move 5s; -moz-animation-play-state:paused; } div:hover { -moz-animation-play-state:running; } @-moz-keyframes move { 0% { left:0px; } 100% { left:900px; } } </style> </head> <body> <div>Hello</div> </body> </html> The animation-fill-mode property • • • animation-fill-mode specifies what property values are applied by an animation outside the time it is executing – By default, an animation will not affect property values between the time it is applied (when the animation-name property is set on an element) and the time it begins execution (which is determined by the animation-delay property) – Also, by default, an animation does not affect property values after the animation ends (determined by the animation-duration property) – The value of animation-fill-mode can override this behavior Possible values for the animation-fill-mode property • backwards - the animation will apply the property values defined in its 0% keyframe as soon as the animation is applied, during the period defined by animation-delay • forwards - the animation will apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed The last executing keyframe is the 100% keyframe unless the animation has animation-direction set to alternate and the iteration count is a finite even number, in which case it is the 0% keyframe • both the animation will follow the rules for both ‘forwards’ and ‘backwards’ That is, it will extend the animation properties in both directions • none - this is the default value for the property animation-fill-mode appears to be supported only by -moz- browsers at present Nested animations • View this animation in a -moz- browser: http://www.cs.ucc.ie/j.bowen/cs4506/slides/movingBell1.html • The bell rings as we have seen before but, at the same time, the bell and ringing text move sideways • This could be achieved in several ways – but in this implementation, we achieve it by • animating some elements • inside another element which is also being animated independently Nested animations (contd.) • • The bell and ringing text are nested inside another div element As we shall see in the stylesheet on the next slide, this envelope is animated to move horizontally – while the bell and ringing text are animated as before <!DOCTYPE html> <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> 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% { -moztransform: 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% { -moztransform: 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% { -moztransform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } Simultaneous animations • View this animation in a -moz- browser: http://www.cs.ucc.ie/j.bowen/cs4506/slides/movingBell2.html • As before, the bell moves sideways while ringing, but • it also moves vertically • This could be achieved in several ways – but in this implementation, we achieve it by applying multiple animations to the envelop div Simultaneous animations (contd.) • The only change to the HTML page is to make it refer to a different external stylesheet <!DOCTYPE html> <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> 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% { -moztransform: 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% { -moztransform: 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% { -moztransform: 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 • • • • http://css3.bradshawenterprises.com/ http://www.css3maker.com http://www.createcss3.com/ http://ntuts.com/demo/slide-html5-css3/ 104 Q&A THE END