Slide 1
Slide 1 text
CSS3 Transforms Transitions and Animations
FEVR 25.9.2014
The Fab
Slide 2
Slide 2 text
Transform
The transform property applies a 2D or 3D transformation to an
element. This property allows you to rotate, scale, move, skew,
etc., elements.
Slide 3
Slide 3 text
Transform: scale
.square {
height: 250px;
width: 250px;
background-color: orange;
}
becomes
.square {
height: 250px;
width: 250px;
background-color: orange;
transform: scale(2);
}
Slide 4
Slide 4 text
Transform: rotate & skew
.square {
height: 250px;
width: 250px;
background-color: orange;
transform: rotate(45deg);
}
.square {
height: 250px;
width: 250px;
background-color: orange;
transform: skew(45deg);
}
Slide 5
Slide 5 text
Transform: translate
.square {
height: 250px;
width: 250px;
background-color: orange;
}
becomes
.square {
height: 250px;
width: 250px;
background-color: orange;
transform: translate(50px,50px);
}
Slide 6
Slide 6 text
Multiple Transforms
.square {
height: 250px;
width: 250px;
background-color: orange;
}
becomes
.square {
height: 250px;
width: 250px;
background-color: orange;
transform: scale(2) rotate(45deg);
}
Slide 7
Slide 7 text
Transform origin
the default transform origin is the dead center of an element,
both 50% horizontally and 50% vertically.
.square {
transform: rotate(45deg);
transform-origin: right top;
}
.square {
transform: rotate(45deg);
transform-origin: 100% 100%;
}
Slide 8
Slide 8 text
Transform 3D
transform: translateZ(0);
transform: translate3d(0,0,0);
3d transform uses GPU not CPU, so they are faster than 2d
transform
Slide 9
Slide 9 text
Transition
CSS Transition allows property changes in CSS values to occur
smoothly over a specified duration
Slide 10
Slide 10 text
Anatomy of a Transition
Keyframe 1
Keyframe 2
TWEEN
Slide 11
Slide 11 text
Transition properties
.square {
//name of the CSS property the transition effect is for
transition-property: width;
//how many seconds or milliseconds a transition effect takes to complete
transition-duration: 1s;
//the speed curve of the transition effect
transition-timing-function: linear;
//when the transition effect will start
transition-delay: 2s;
}
.square {
transition: width 1s linear 2s;
}
Slide 12
Slide 12 text
Transition timing function
LINEAR
same speed from start
to end
EASE IN-OUT
slow start and end
EASE OUT
slow end
EASE IN
slow start
Slide 13
Slide 13 text
Multiple Transition
.square {
transition(
background-color 1s ease 100ms,
padding 2s linear 0,
transform 500ms ease-in 2s
)
}
Slide 14
Slide 14 text
Animation
CSS Animation is like transitions, however we can specify the
number of times it plays and whether it plays in a single direction
or both directions
They are named and can be reusable by more than one css rule
Slide 15
Slide 15 text
Animation Example
.square {
height: 60px;
width: 60px;
animation: ‘moveit’ 4s ease 3 normal;
}
@-webkit-keyframes ‘moveit’ {
0% {
width: 200px;
background: red;
opacity: 0.5
transform: scale(.5) rotate(15deg);
}
50% {
width: 300px;
background: red;
opacity: 1
transform: scale(1.3) rotate(15deg);
}
100% {
width: 500px;
background: yellow;
opacity: 0,5
transform: scale(1) rotate(0deg);
}
}
Slide 16
Slide 16 text
Animation Values
animation: ‘moveit’ 4s ease 3 normal;
animation-name: ‘moveit’
animation-duration: time
animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out
animation-iteration-count: number or infinite
animation-direction: normal or alternate
animation-delay: time
animation-fill-mode: backwards/forwards/none/both
//Configures what values are applied by the animation before and after it is executing.
Slide 17
Slide 17 text
Transform
+
Transition
+
Animation
=
Award?