Transition and Transforms

Chapter: 64

 Transitions

CSS3 Transitions

CSS3 transitions allow us to change from one property value to another over a given duration.
transition-property - specifies the property to be transitioned
transition-duration - specifies the duration over which transitions should occur
transition-timing-function - specifies how the pace of the transition changes over its duration
transition-delay - specifies a delay (in seconds) for the transition effect

In the example below, we set the transition property to transform, with a duration of 5 seconds, and with an ease-in timing function that specifies a transition effect with a slow start.

transition: transform 5s ease-in;

CSS

Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more.

CSS3 Transitions

Which of the following is not a supported parameter of the transition property?

duration

type

property

function

The Transition Property

In the example below, the div element has width and height of 50px, with a green background. We specified a transition effect for the width property, with a duration of 3 seconds:

The CSS will look like this:

div {
width: 50px;
height: 50px;
background: #32CD32;
transition: width 3s;
}
div:hover {
width: 250px;
}

CSS

If you hover over the div element, it will move from left to right.

When the cursor is moused out of the element, it will gradually change back to its original style.

The Transition Property

Add a transition property that changes the background color in 5 seconds.

transition

:

background-color

5s

ease-in;

transition-timing-function

The transition-timing-function property specifies the speed curve of the transition effect.
It can have the following values:
ease - the animation starts slowly, then accelerates quickly.
ease-in - starts slowly, then accelerates, and stops abruptly.
ease-out - starts quickly, but decelerates to a stop.
ease-in-out - similar to ease, but with more subtle acceleration and deceleration.
linear - constant speed throughout the animation; often best for color or opacity changes.

Finally, we have cubic-bezier(), which allows you to define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.

transition-timing-function: cubic-bezier(0,0,1,1);

CSS

If no timing function is specified, the default value is ease.

transition-timing-function

Which of the following timing functions defines custom transitions?

cubic-bezier()

ease

steps()

linear

Chapter: 65

Transform: rotate()

CSS3 Transforms

CSS3 transforms allow you to translate, rotate, scale, and skew elements.
A transformation is an effect that lets an element change shape, size, and position.
CSS3 supports 2D and 3D transformations. Let's take a look at the rotate transformation:

div {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
}

CSS

The div element before the transform will look like this:

Now let's apply the div element to rotate by 10deg

div {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(10deg);
}

CSS

And here is the result:The rotate() method rotates an element clockwise or counter-clockwise, according to a given degree.

Negative value will result in a counter clockwise rotation.

CSS3 Transforms

What value does the rotate function take?

direction

angle

coordinates

Using Negative Values

As previously mentioned, using a positive value will rotate an element clockwise, and using a negative value will rotate the element counter-clockwise.

div.positive {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(10deg);
}
div.negative {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(-10deg);
}

CSS

Result:

Run the code and see how it works!

Using Negative Values

Add the transformation property to rotate the element 45 degrees, counter-clockwise.

transform:

(

45deg);

Chapter: 66

Transform origin, Translate(), Skew()

transform-origin

The transform-origin property allows you to change the position of transformed elements. The default value for the property is 50% 50%, which corresponds to the center of the element.
In the example below, we use the transform-origin property together with transform-rotate. The origin of the x-axis (horizontal) is set to 25% from the left. The origin for the y-axis (vertical) is set to 75% from above.

The CSS:

div.empty-div {
position: relative;
height: 100px;
width: 100px;
margin: 30px;
padding: 10px;
border: 1px solid black;
}
div.green-div {
padding: 50px;
position: absolute;
background-color: #8bc34a;
border: 1px solid white;
transform: rotate(15deg);
transform-origin: 25% 75%;
}

CSS

Result:

0 0 is the same value as top left, and 100% 100% is the same value as bottom right.
The transform-origin property must be used together with the transform property.

transform-origin

Which choice is the default value for the transform-origin property?

left

right top

right

center

The translate() Method

The translate() method moves an element from its current position (according to the parameters given for the x-axis and the y-axis). Positive values will push an element down and to the right of its default position, while negative values will pull an element up and to the left of its default position.

In this example below, the div element is moved 100px to the right and 50px down:

div {
padding: 50px;
position: absolute;
background-color: #32CD32;
transform:translate(100px, 50px);
}

CSS

Result:

An element can also be moved by setting the margins or by positioning the element, although translate is a better choice for animating elements.

The translate() Method

Add a translate function that moves the element 50 pixels from the left and 100 pixels from the top.

transform:

(

px,

px);

The skew() Method

The skew() method skews an element along the x-axis and the y-axis by the given angles.

The following example skews the <div> element by 30 degrees along the X-axis:

transform: skew(30deg);

CSS

Result:

If the second parameter is not specified, it has a zero value.

The skew() Method

Which value type is used in the skew function?

X axis and Y axis

pixels

degrees

Chapter: 67

Scale(), Multiple Transformations

The scale() Method

The scale() method increases or decreases the size of an element, according to the parameters given for the width and height. 1 stands for the original size, 2 for twice the original size, and so on.

In the example below, we decreased the first div by the factor 0.7 both horizontally and vertically, and increased the second div by a factor of 1.5 horizontally and vertically.

div.first {
width: 200px;
height: 100px;
background-color: #8BC34A;
transform: scale(0.7, 0.7);
color:white;
}
div.second {
margin: 60px;
width: 200px;
height: 100px;
background-color: #8bc34a;
transform: scale(1.5,1.5);
color:white;
}

CSS

Result:

If only one parameter is passed to the scale() method, it will apply that factor for both the height and the width.

The scale() Method

Fill in the blank to reduce the element to 20% of its original size.

transform:

(0.2);

Multiple Transforms

Multiple transforms can be used at once. Rotating and scaling the size of an element at the same time is an example of that.
Applying multiple transforms to an element is simple; just separate them using spaces.

Here's an example with two transforms defined:

transform: rotate(45deg) translate(100px);

CSS

Result:

If you use commas to separate the functions, none of the functions will be applied, so keep in mind not to use commas.

Multiple Transforms

When adding multiple transformations in a single transform property, separate them with ...

semicolons

commas

spaces

Chapter: 68

Keyframes & Animations

CSS3 Animations

An animation lets an element gradually change from one style to another.
You can change as many CSS properties as you want to, as many times you want to.
Keyframes hold the styles the element will have at certain times

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.

The following example will change the background color of an element three times: when the animation is 50% complete, 70% complete, and when the animation is 100% complete.

The CSS:

@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
70% {background-color: blue;}
100% {background-color: green;}
}

CSS

example is the name of the animation. You can choose any name for your animation.

CSS3 Animations

Can you have multiple key frames in an animation property?

No

Yes

The @keyframes Rule

As an alternative to using percentages, you can use from and to keywords, where:
from is a starting offset of 0%
to is an ending offset of 100%.

The two examples below are equivalent, and produce the same result:

@keyframes colorchange {
0% {background-color: red;}
100% {background-color: green;}
}

CSS

@keyframes colorchange {
from {background-color: red;}
to {background-color: green;}
}

CSS

colorchange is the animation name.

The @keyframes Rule

Which alternative word can be used in place of 0%?

The @keyframes Rule

To get an animation to work, you must bind the animation to an element.
In the example below, the animation lasts one second, and changes the background color of the red div to green and blue.

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: colorchange;
animation-duration: 1s;
}
@keyframes colorchange {
0% {background-color: red;}
50% {background-color: green;}
100% {background-color: blue;}
}

CSS

Result:The animation-name property specifies the animation to be used for the element.
The animation-duration property specifies the duration of the selected animation.

If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.

Chapter: 69

Animation Property

The animation-name Property

animation-name property defines which animation to use.
In this example, the name of the animation is set to colorchange, which matches the defined keyframes.

The CSS:

div {
animation-name: colorchange;
animation-duration: 5s;
}
@keyframes colorchange {
from { width: 0px; }
to { width: 100px; }
}

CSS

The animation-duration property specifies the duration of the selected animation in seconds.

If the animation name does not match any keyframe rule, the animation will not execute.

Animation Properties

The animation-timing-function specifies the speed curve of an animation. It 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

The CSS syntax looks like this:

animation-timing-function: linear;

CSS

animation-delay - defines the delay before an animation starts. The CSS syntax looks like this:

animation-delay: 2s;

CSS

The animation-delay and animation-duration values can be defined in seconds (s) or milliseconds (ms).

Animation Properties

Fill in the blank to specify a 2-second delay before the animation begins.

animation-delay:

s;

More Animation Properties

The animation-iteration-count property determines the number of times an animation repeats.
For example, you can set the animation to run 5 times:

animation-iteration-count: 5;

CSS

To make the animation repeat forever, just use the infinite value:

animation-iteration-count: infinite;

CSS

The animation-direction indicates how the keyframe should be applied.
The values can be set as:
normal - the default value, which means it plays forward from 0 % to 100%.
reverse - plays the keyframe in an opposite direction from 100 % to 0%
alternate - the animation first runs forward, then backward, then forward.
alternate-reverse - the animation first runs backward, then forward, then backward.

If you use 0 or a negative number for the animation-iteration-count, the animation will never start.

More Animation Properties

Which property value is used to have the animation repeat forever?

animation Property

Consider the following example:

div {
animation-name: colorchange;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: reverse;
}

CSS

A single animation property can be used to achieve the same result as the above code:

div {
animation: colorchange 3s ease-in 1s infinite reverse;
}

CSS

The order in which each property is declared in the shorthand declaration is important and cannot be altered, or the animation will not work properly.

Chapter: 70

3D Transforms

3D Transforms

Along with the x and y axes, 3D Transforms introduce the Z-axis, which enables 3D manipulations.
3D Transforms are quite similar to 2D Transforms:
rotateX(), rotateY() and rotateZ() rotate an element in 3D space around the corresponding axis at a given degree.

The CSS:

div.X {
transform: rotateX(150deg);
}
div.Y {
transform: rotateY(150deg);
}
div.Z {
transform: rotateZ(150deg);
}

CSS

Result:

You can switch off all transformations applied to an element using the none function: transform: none;

3D Transforms

Add a rotate function that rotates the element 45 degrees around the Z axis.

transform:

rotateZ

(45deg);

Translations

3D translate methods allow you to move the element horizontally (translateX), vertically (translateY) and into or out of the screen (translateZ), using any CSS length units (px, em, %, etc.). Positive values moves the element toward the viewer, negative values away.

The CSS:

#mybox1 {
transform: translateX(29px)
translateY(5em)
translateZ(-13px);
}

CSS

Result (Before translation):Result (After translation):

The translate3d() method allows us to pass the x, y, and z offsets, all at once and in the following order:

#mybox1 {
transform: translate3d(-20px, 4em, 10px);
}

CSS

Like the translate3d() method, there are also scale3d() and rotate3d(), which are applicable for scaling and rotating elements in 3D.

Translation of an element is similar to relative positioning - it doesn't affect the document's flow. The translated element will keep its position in the flow and will only appear to have moved.

Chapter: 71

Module 7 Quiz

Which transformation does not exist in CSS3?

rotateX

skewB

translateZ

rotate3D