WELCOME TO

Computer 9
TechnoBiz
Lesson 2
Module 3

CSS Transforms and

Animation
CSS Transforms are a robust feature that allowsyou to modify the appearance of an element in the browser.
Elements can now be
moved, scaled, turned and stretched. With CSS Animations, these two can work together to bring pages alive.
Gone are the days that you need to put up Flash animations or any animated images as CSS3 has now the
capability to create its own animation.
 CSS3 Transforms

To transform the appearance

of an element, you are going to use the
CSS transform property.
 Examples
div{
-webkit-transform:rotate(30deg); /* Chrome, Safari, Opera */
-moz-transform:rotate(30deg); /* Firefox */
-ms-transform:rotate(30deg); /* IE 9 */
transform: rotate(30deg); /*Standard syntax */
}
 div{
Examples -webkit-transform:rotate(30deg); /* Chrome, Safari, Opera */
-moz-transform:rotate(30deg); /* Firefox */
-ms-transform:rotate(30deg); /* IE 9 */
transform: rotate(30deg); /*Standard syntax */
}

 translate()
 rotate()
 scale()
 skew()
 matrix()
 With CSS3 Transform, you can transform elements using 2D or 3D Transformation. In this book, we will
only discuss 2D Transformation. However, if you want to learn 3D Transforms, you can practice and study
it on your own.

Translate

div{
-webkit-transform: translate(50px, 75px);
-moz-transform: translate(50px, 75px);
-ms-transform: translate(50px, 75px);
transform: translate(50px,75px);
}
 The translate() method moves an element sideways or up and down from its current position. In the given
example, the function moves the element 50 pixels from the left and 75 pixels from the top. The translate()
method can also accept negative values. For example translate(-25px, -50px), this function will move the
element 25 pixels to the left and 50 pixels up.

Translate

div{
-webkit-transform: translate(50px, 75px);
-moz-transform: translate(50px, 75px);
-ms-transform: translate(50px, 75px);
transform: translate(50px,75px);
}
 The rotate() method, rotates an element clockwise at a given degree. It can accept negative values. When
the value given is negative, it will rotate the element counter-clockwise. In the example above, the DIV
element will be rotated 25 degree clockwise.

Rotate

div{
-webkit-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-ms-transform:rotate(25deg);
transform: rotate(25deg);
}
 The scale() method increases or decreases the size of an element. The scale value serves as a multiplier. If
you only use one value, the element will be stretched in both directions. In the given example, scale(3,5)
will transform the width to be thrice its original size and the height 5 times its original size.

Scale

div{
-webkit-transform: scale(3,5);
-moz-transform: scale(3, 5);
-ms-transform: scale(3,5);
transform: scale(3, 5);
}
 The skew() method tilts an element one way or another. It is like turning a rectangle shape into a
parallelogram. In the given example, the method turns the element 30 degrees around the X-axis, and the
20 degrees around the Y-axis.

Skew

div{
-webkit-transform:skew(30deg, 20deg);
-moz-transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);
transform: skew(30deg, 20deg);
}
 The matrix() method can be used to combine all transforms into one. It is like a shorthand property for transform. This
function is a bit complicated to understand. For example, you want to rotate an element 45 degrees clockwise and
translate an element 24px to the right and 25px down, the equivalent of that in matrix function is matrix(0.71, 0.71, -
0.71, 0.71, -0.71, 34.65). Please take note that the values in this example are rounded off. Do not worry because there is
a tool that can help you convert a group of transforms into a single matrix declaration. All you need to do is go to this
site: meyerweb.com/eric/tools/matrix/

Matrix

div{
-webkit-transform: matrix(1,-0.2, 0, 1, 0, 0);
-moz-transform: matrix(1,-0.2, 0, 1, 0, 0);
-ms-transform: matrix(1,-0.2, 0, 1, 0, 0);
transform: matrix(1, -0.2,0, 1, 0, 0);
}
CSS3
Animations
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current
style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

CSS Transforms best works with animations. With animations, elements move. It makes the page alive.
CSS3 Animations .translate{
width:100px; height:100px;
background-color:pink;
animation-name:example;
animation-duration:10s;
}

@keyframes
example {
from{background-color: red;}
to {background-color: yellow;}
}
The shorthand property for setting all the animation properties is animation.

Syntax:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 Run Animation in Reverse
Direction or Alternate Cycles
The animation-direction property specifies whether an animation should be played forwards, backwards or
in alternate cycles.

The animation-direction property can have the following values:

normal - The animation is played as normal (forwards). This is default

reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then forwards
 Specify the Speed Curve of the Animation
The animation-timing-function property specifies the speed curve of the animation. The animation-timing-
function property can have the following values:

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function
 Specify the fill-mode For an Animation
CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-
mode property can override this behavior.

The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it
ends, or both).

The animation-fill-mode property can have the following values:

none - Default value. Animation will not apply any styles to the element before or after it is executing
forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-
iteration-count)
backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this
during the animation-delay period
both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
 The animation shorthand CSS property applies an animation between
styles. It is a shorthand for animation-name, animation-duration,
animation-timing-function, animation-delay, animation-iteration-count,
animation-direction, animation-fill-mode, and animation-play-state.
 SW1
Determine the attributes being asked in each statement.

• This attribute sets the number of times the animation should be played.
• This statement is added to create movements for animation and a rule
that specifies the animation code.
• This attribute contains the name of the animation.
• This attribute contains the speed of the animation.
• This statement is to set the time to start the animation.
I HOPE YOU LEARN SOMETHING
NEW IN THIS LESSON

thank you for

listening