My CSS Notebook I

***** On Monday, 9/3/18, I started learning the fundamentals of CSS on sololearn.com. *****

***** On Tuesday, 1/15/19, I completed the CSS Fundamentals course and was issued the certificate. *****

TAKE NOTE THAT THIS IS NOT A .CSS FILE BECAUSE IT WILL BE A PLAIN TEXT FILE. INSTEAD, CSS WILL BE IMPLEMENTED INTO A .HTML FILE. THIS CAN BE DONE VIA A LINK, EMBED, IMPORT AND/OR INLINE STYLES.

Module 7: Transitions & Transforms

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

Syntax:

transition: transform 5s ease-in;

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

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: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.1! ←

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

Take note that when the cursor is moused out of the element, it will gradually change back to its original style.

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.
• cubic-bezier() - allows you to define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.

The CSS: (Code)

div {
  width: 50px;
  height: 50px;
  background: #32CD32;
  transition-timing-function: cubic-bezier(0,0,1,1);
  transition: width 3s;
}
div:hover {
  width: 250px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.2! ←

Take note that if no timing function is specified, then the default value is ease.

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

The CSS: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.3! ←

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

The CSS: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.4! ←

The rotate&lpar) method rotates an element clockwise or counter-clockwise, according to a given degree.

Take note that a negative value will result in a counter-clockwise direction.

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.

The CSS: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.5! ←

III. 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: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.6! ←

Take note that 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.

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 the example below, the div element is moved 100px to the right and 50px down:

The CSS: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.7! ←

Take note that 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 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:

Syntax:

transform: skew(30deg);

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.8! ←

Take note that if the second parameter is not specified, it has a zero value.

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

The CSS: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.9! ←

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

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:

Syntax:

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.10! ←

Take note that if you use commas to separate the functions, none of the functions will be applied, so keep in mind not to use commas.

V. Keyframes & Animation

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 as you want to.
Keyframes hold the styles th 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.

Syntax:

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

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

The @keyframes Rule

As an alternative to using percentages, you can use from and to keywords, where:

• from - starting offset of 0%
• to - ending offset of 100%

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

Syntax:

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

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

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 then to blue.

The CSS: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.11! ←

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

Take note that if the animation-duration property is not specified, the animation will have no effect, because the default value is 0.

VI. Animation Properties

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: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.12! ←

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

Take note that if the animation 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 - specifes an animation with a slow start, then fast, then slowly (this is default)
• linear - specifies an animation with the same speed from start to end
• ease-in - specifes an animation with a slow start
• ease-out - specifies an animation with a slow end
• ease-in-out - specifes an animation with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define you own values in a cubic-bezier function

Syntax:

animation-timing-function: linear;

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.13! ←

animation-delay - defines the delay before an animation starts.

Syntax:

animation-delay: 2px;

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.14! ←

Take note that the animation-delay and animation-duration values can be defined in seconds (s) or milliseconds (ms).

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:

Syntax:

animation-iteration-count: 5;

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.15! ←

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

Syntax:

animation-iteration-count: infinite;

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.16! ←

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

Take note that if you use 0 or a negative number for the animation-iteration-count, the animation will never start.

animation Property

Consider the following example:

The CSS: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.17! ←

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

The CSS: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.18! ←

Take note that 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.

VII. 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: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.19! ←

Take note that you can switch off all transformations applied to an element using the none function:
transform: none;

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: (Code)

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.20! ←

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:

Syntax:

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

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.21! ←

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

Take note that 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.

Perspective

Perspective defines how the depth of the 3D scene is rendered. Think of perspective as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.
When defining the perspective property for an element, it is the child elements that get the perspective view, not the element itself.

The CSS: (Code)

div.empty-div {
  perspective: 100px;
}
div.green-div {
  transform: rotateX(45deg);
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_7.22! ←

Take note that the perspective property only affects 3D transformed elements.

Go to top
« Previous 1 2 3 4 5 6 7 8 Next »