CSS3 TTA (Transform Transition Animation)

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.

.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

• 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 {
-webkit-perspective: 500px;
}
.transformed {
}

<div class="transformed"></div>
</div>

.container {
}
.transformed {
}
.child {
-webkit-transform-origin: top left;
-webkit-transform: rotateX(40deg);
background-color: lime;
}

<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 {
}
.transformed {
-webkit-transform-style: preserve-3d;
}
.child {
-webkit-transform-origin: top left;
-webkit-transform: rotateX(40deg);
background-color: lime;
}

<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;
In safari
}
.container > div {
position: absolute; left: 0;
}
.container > :first-child {
transform: rotateY(45deg);
background-color: orange;
top: 10px;
height: 135px;
}
In chrome
.container > :last-child {
transform: translateZ(40px);
background-color: rgba(0, 0, 255, 0.75);
top: 50px;
height: 100px;
}

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

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

CSS3 TTA (Transform Transition Animation)

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

CSS3 TTA (Transform Transition Animation)

Recommended

More Related Content

Similar to CSS3 TTA (Transform Transition Animation) (20)

CSS3 TTA (Transform Transition Animation)

Editor's Notes