css3 tta (transform transition animation)
TRANSCRIPT
![Page 1: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/1.jpg)
Animation, Transition and Transform in CSS3
![Page 2: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/2.jpg)
Contents of Transforms
• CSS3 Transforms– Transform rendering model– 3D Transform Rendering model– Properties, Functions
![Page 3: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/3.jpg)
Transforms?
• With transform, we can– Move– Scale– Turn– Spin– Stretch
![Page 4: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/4.jpg)
Transform rendering model
• Elements establish their local coordinate system within the coordinate system of their parent.
![Page 5: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/5.jpg)
<div style=“transform: translate(80px, 80px)"> <div style=“transform: scale(1.5, 1.5)"> <div style=“transform: rotate(45deg)"></div> </div></div>
![Page 6: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/6.jpg)
<div style=“transform: translate(80px, 80px)"> <div style=“transform: scale(1.5, 1.5)"> <div style=“transform: rotate(45deg)"></div> </div></div>
![Page 7: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/7.jpg)
.t { height: 100px; width: 100px; transform: translate(80px, 80px) rotate(45deg); background-color: yellow; opacity: 0.5}
<div class='t'> <div class='t'> <div class='t'></div> </div></div>
![Page 8: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/8.jpg)
.t { height: 100px; width: 100px; transform: translate(80px, 80px) rotate(45deg); background-color: yellow; opacity: 0.5}
<div class='t'> <div class='t'> <div class='t'></div> </div></div>
![Page 9: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/9.jpg)
• http://www.w3.org/TR/CSS2/visudet.html• CSS2 Visual formatting model– Effects are applied after elements have been sized and
positioned according to the Visual formatting model from [CSS21]
• Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context(z-index).– Box positions and sizes are calculated with respect to
the edges of a rectangular box called a containing block
![Page 10: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/10.jpg)
<div style='width: 200px; height: 200px; overflow: auto'><div class='t'> <div class='t'> <div class='t'></div> </div></div></div>
![Page 11: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/11.jpg)
• Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms.
• If the root element's background were repeating dots, and a transformation of ‘scale(0.5)’ were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport. ( Did not operate(implemented)? Is wrong example code?)
• http://jsfiddle.net/freestrings/WQs9P/
![Page 12: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/12.jpg)
3D Transform Rendering
The scaling is proportional to d/(d − Z) where d, the value of ‘perspective’, is the distance from the drawing plane to the the assumed position of the viewer's eye.
![Page 13: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/13.jpg)
div { height: 150px; width: 150px;}.container {border: 1px solid black;}.transformed { background-color: blue; -webkit-transform: rotateY(50deg);}
<div class="container"> <div class="transformed"></div></div>
![Page 14: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/14.jpg)
div { height: 150px; width: 150px;}.container {border: 1px solid black;}.transformed { background-color: blue; -webkit-transform: rotateY(50deg);}
<div class="container"> <div class="transformed"></div></div>
![Page 15: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/15.jpg)
div { height: 150px; width: 150px;}.container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { background-color: blue; -webkit-transform: rotateY(50deg);}
<div class="container"> <div class="transformed"></div></div>
![Page 16: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/16.jpg)
div { height: 150px; width: 150px;}.container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { background-color: blue; -webkit-transform: rotateY(50deg);}
<div class="container"> <div class="transformed"></div></div>
![Page 17: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/17.jpg)
.container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { -webkit-transform: rotateY(50deg); background-color: blue;}.child { -webkit-transform-origin: top left; -webkit-transform: rotateX(40deg); background-color: lime;}
<div class="container"> <div class="transformed"> <div class="child"></div> </div></div>
![Page 18: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/18.jpg)
• The lime element is being rendered into the plane of its parent because it is not a member of a 3D rendering context; the parent is "flattening"
![Page 19: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/19.jpg)
.container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(50deg); background-color: blue;}.child { -webkit-transform-origin: top left; -webkit-transform: rotateX(40deg); background-color: lime;}
<div class="container"> <div class="transformed"> <div class="child"></div> </div></div>
![Page 20: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/20.jpg)
.container { -webkit-perspective: 500px; border: 1px solid black;}.transformed { -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(50deg); background-color: blue;}.child { -webkit-transform-origin: top left; -webkit-transform: rotateX(40deg); background-color: lime;}
<div class="container"> <div class="transformed"> <div class="child"></div> </div></div>
![Page 21: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/21.jpg)
• The blue element now establishes a 3D rendering context, of which the lime element is a member. Now both blue and lime elements share a common three-dimensional space, so the lime element renders as tilting out from its parent, influenced by the perspective on the container.
![Page 22: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/22.jpg)
.container { background-color: rgba(0, 0, 0, 0.3); transform-style: preserve-3d; perspective: 500px;} .container > div { position: absolute; left: 0;}.container > :first-child { transform: rotateY(45deg); background-color: orange; top: 10px; height: 135px;}.container > :last-child { transform: translateZ(40px); background-color: rgba(0, 0, 255, 0.75); top: 50px; height: 100px;}
In chrome
In safari
![Page 23: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/23.jpg)
Properties, Functions
• ‘transform’ property– This property contains a list of transform
functions.• ‘transform-origin’ property– This property must be used together with the
‘transform’ property.– http://www.w3schools.com/cssref/css3_pr_transf
orm-origin.asp
![Page 24: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/24.jpg)
• ‘transform-style’ property– flat|preserve-3d
• ‘perspective’ property– http://www.w3schools.com/cssref/trycss3_perspective_inuse.htm
• ‘perspective-origin’ property– The resolved value of ‘perspective-origin’ is the used value (i.e.,
percentages are resolved to absolute lengths).– https://developer.mozilla.org/en/CSS/perspective-origin (firefox)
• ‘backface-visibility’ property– Determines whether or not the "back" side of a transformed
element is visible when facing the viewer.– visible | hidden
![Page 25: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/25.jpg)
• transform function– matrix, matrix3d– translate|X|Y|Z|3d– scale|X|Y|Z|3d– rotate|X|Y|Z|3d– skew|X|Y– perspective
![Page 26: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/26.jpg)
And many other things in transforms
• SVG transform• Matrix Decomposition for Animation• Unmatrix• Recomposing the matrix• Mathematical Description of Transform
Functions
![Page 27: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/27.jpg)
Transition Contents
• CSS3 Transitions– Transitions– Properties and Funtions– Events
![Page 28: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/28.jpg)
Transitions
• Animate smoothly from the old state to the new state over time.
• Must specify two things– Specify the CSS property you want to add an effect
to– Specify the duration of the effect
![Page 29: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/29.jpg)
Properties and Functions
• Properties– transition ( shorthand property)– transition-property (Specifies the name of the CSS
property to which the transition is applied)– transition-duration (Defines the length of time that a
transition takes. Default 0)– transition-timing-function (Describes how the speed
during a transition will be calculated. Default "ease”)– transition-delay (Defines when the transition will
start. Default 0)
![Page 30: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/30.jpg)
• ‘transition-timing-function’ details– stepping function
• A stepping function is defined by a number that divides the domain of operation into equally sized intervals
– cubic Bézier curve• http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curve
s
• Functions– ease = cubic-bezier(0.25, 0.1, 0.25, 1.0).– linear = cubic-bezier(0.0, 0.0, 1.0, 1.0).– ease-in = cubic-bezier(0.42, 0, 1.0, 1.0).– ease-out = cubic-bezier(0, 0, 0.58, 1.0).– ease-in-out = cubic-bezier(0.42, 0, 0.58, 1.0)– cubic-bezier(n, n, n, n)
![Page 31: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/31.jpg)
• Functions– linear = the same speed from start to end– ease = a slow start, then fast, then end slowly– ease-in = a slow start.– ease-out = a slow end.– ease-in-out = a slow start and end
![Page 32: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/32.jpg)
Transition Events
• transitionend– Event occurs at the completion of the transition
![Page 33: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/33.jpg)
Animations Contents
• CSS3 Animations– Animations– Keyframes– Properties– Events
![Page 34: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/34.jpg)
Animations
• Animations are similar to transitions in that they change the presentational value of CSS properties over time.
• The principal difference is that while transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied. ( Because animation require a name of keyframe.)
![Page 35: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/35.jpg)
keyframes
• Keyframes are used to specify the values for the animating properties at various points during the animation.
• The keyframes specify the behavior of one cycle of the animation.
• Use a ‘CSS at-rule’, @keyframes
![Page 36: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/36.jpg)
• Timing functions for keyframes
@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 50% { top: 100px; animation-timing-function: ease-in; } to { top: 100px; } }
![Page 37: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/37.jpg)
Properties• animation : A shorthand property, except the animation-play-state
property• animation-name: name of the @keyframes animation• animation-duration• animation-timing-function : See transition functions• animation-delay• animation-iteration-count : The number of times an animation is played.
• animation-direction : Specifies whether or not the animation should play in reverse on alternate cycles.
• animation-play-state : Whether the animation is running or paused.
• http://www.w3schools.com/css3/css3_animations.asp
![Page 38: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/38.jpg)
Events
• animationstart• animationend• animationiteration
![Page 39: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/39.jpg)
Let’s make!
![Page 40: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/40.jpg)
Spinner
![Page 41: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/41.jpg)
• Draw a bar..loading.bar div{ width: 10px; height: 30px; background: black; position: absolute; top: 35px; left: 45px; opacity:0.05; -webkit-animation: fadeit 1.1s linear infinite;}
![Page 42: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/42.jpg)
• positioning..loading.bar div:nth-child(1){ -webkit-transform: rotate(0deg) translate(0, -30px); -webkit-animation-delay:0.39s;} ….loading.bar div:nth-child(8){ -webkit-transform: rotate(315deg) translate(0, -30px); -webkit-animation-delay:1.3s;}
![Page 43: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/43.jpg)
• iteration.
@-webkit-keyframes fadeit{ 0%{ opacity:1; } 100%{ opacity:0; }}
![Page 44: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/44.jpg)
• http://jsfiddle.net/freestrings/mLu22/
![Page 45: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/45.jpg)
![Page 46: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/46.jpg)
• When the computed value of an animatable property changes, implementations must decide what transitions to start
![Page 47: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/47.jpg)
• ul – perspective: 600px;– perspective-origin: 0% 50%;
• li– transition: all 600ms ease, opacity 200ms ease;– transform-origin: 0% 0%;
• .future or .past– transform: rotateY(90deg); – opacity : 0;
![Page 48: CSS3 TTA (Transform Transition Animation)](https://reader035.vdocuments.net/reader035/viewer/2022081516/554f6208b4c9058a148b4863/html5/thumbnails/48.jpg)
• Real sample– http://lab.hakim.se/scroll-effects/
• Conceptual implementation– http://jsfiddle.net/freestrings/hdbUv/