Animation, Transition and Transform in CSS3

Contents of Transforms

• CSS3 Transforms– Transform rendering model– 3D Transform Rendering model– Properties, Functions

Transforms?

• With transform, we can– Move– Scale– Turn– Spin– Stretch

Transform rendering model

• Elements establish their local coordinate system within the coordinate system of their parent.

<div style=“transform: translate(80px, 80px)"> <div style=“transform: scale(1.5, 1.5)"> <div style=“transform: rotate(45deg)"></div> </div></div>

<div style=“transform: translate(80px, 80px)"> <div style=“transform: scale(1.5, 1.5)"> <div style=“transform: rotate(45deg)"></div> </div></div>

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

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

• 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

<div style='width: 200px; height: 200px; overflow: auto'><div class='t'> <div class='t'> <div class='t'></div> </div></div></div>

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

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.

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>

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>

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>

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>

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

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

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

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

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

.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

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

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

• transform function– matrix, matrix3d– translate|X|Y|Z|3d– scale|X|Y|Z|3d– rotate|X|Y|Z|3d– skew|X|Y– perspective

And many other things in transforms

• SVG transform• Matrix Decomposition for Animation• Unmatrix• Recomposing the matrix• Mathematical Description of Transform

Functions

Transition Contents

• CSS3 Transitions– Transitions– Properties and Funtions– Events

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

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)

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

• 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

Transition Events

• transitionend– Event occurs at the completion of the transition

Animations Contents

• CSS3 Animations– Animations– Keyframes– Properties– Events

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

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

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

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

Events

• animationstart• animationend• animationiteration

Let’s make!

Spinner

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

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

• iteration.

@-webkit-keyframes fadeit{ 0%{ opacity:1; } 100%{ opacity:0; }}

• http://jsfiddle.net/freestrings/mLu22/

• When the computed value of an animatable property changes, implementations must decide what transitions to start

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

• Real sample– http://lab.hakim.se/scroll-effects/

• Conceptual implementation– http://jsfiddle.net/freestrings/hdbUv/