facebook google plus twitter
Webucator's Free Introduction to CSS Tutorial

Lesson: Transforms and Transitions

Welcome to our free Introduction to CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will learn to work with transforms and transitions.

Lesson Goals

  • Use transition to animate changes to an element's style.
  • Use transform to move, scale, rotate, and skew elements.

transition

The transition property provides a way to animate elements between two states. Different states can be set with pseudo-classes (e.g., :hover, :active, etc.). transition is shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.

transition-property

transition-property defines the property or properties to animate. It takes the following values:

  1. all - The default value. All animatable properties will transition from the first state to the second state.
  2. none - No properties will transition.
  3. A single property (e.g., transition-property: margin) or a comma-delimited list of properties (e.g.,transition-property: margin, padding, color).

transition-duration

transition-duration sets the amount of time that the transition will take. It takes a positive time value in seconds (s) or milliseconds (ms). The default is 0s.

transition-timing-function

transition-timing-function defines how the element transitions through time, meaning its acceleration or deceleration throughout the transition. transition-timing-function takes the following values:

  1. ease - The default value. The transition speeds up towards the middle of the transition and slows down at the end.
  2. linear - The transition maintains the same speed throughout the transition.
  3. ease-in - The transition starts slow and accelerates until the end.
  4. ease-out - The transition start fast and decelerates until the end.
  5. ease-in-out - The transitions starts slow, accelerates and then decelerates at the end.

transition-timing-function also takes the cubic-bezier() (https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing_functions) and steps() (https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#The_steps()_class_of_timing_functions) function values, which give more control over the precise motion of the transition.

transition-delay

transition-delay sets the time to wait before the transition starts. It takes a positive or negative time value in seconds (s) or milliseconds (ms). If a negative value is set, the transition will start immediately from the place it would be if it had already been running for the given amount of time. The default value is 0s, which means that the transition starts immediately from the beginning. If a positive value is set, the transition will not start for that amount time.

transition

The syntax for transition is shown below. Note that the transition-property and transition-duration properties are required:

Syntax

transition: transition-property
            transition-duration
            transition-timing-function
            transitionon-delay;

If multiple transitions are specified, they are separated in a comma-delimited list like in the example below:

transition: margin 2s ease-in, color 4s;

You can see practical uses of transitions in the demo below:

Code Sample:

TransformsTransitions/Demos/transition-styles.css
body {
  background-color: aliceblue;
}

header {
  background: rgb(214, 214, 214);
  border: black solid 1px;
  border-radius: 1rem;
  margin: auto;
  padding: 1rem;
  width: 50%;
}

header nav a {
  background: rgb(158, 170, 202);
  border: rgb(70, 70, 100);
  border-radius: 0.5rem;
  border-style: none solid solid none;
  border-width: 0 0.2rem 0.2rem 0;
  color: navy;
  display: block;
  font-size: 1.1rem;
  height: 20px;
  margin: 0.2rem;
  padding: 0.2rem;
  text-decoration: none;
  width: 100px;
}

header nav a:hover {
  background: whitesmoke;
  transition: background 1s, 
    height 0.5s, width 0.5s;
  width: 120px;
  height: 30px;
}

header nav a:active {
  color:#cce;
  border-width: 0 0.1rem 0.1rem 0;
}

main {
  background: white;
  width: 75%;
  margin: auto;
}

article {
  background: rgb(155, 170, 170);
  border: black solid 1px;
  border-radius: 0.5rem;
  padding: 0.2rem 1rem 0.5rem;
  margin: 0.5rem auto;
  overflow: hidden;
  height: 75px;
}

article:target {
  background: white;
  height: 200px;
  transition: all 1.5s ease-out;
}

Code Sample:

TransformsTransitions/Demos/transition.html
---- C O D E   O M I T T E D ----
<header>
  <nav>
    <a href="#article1">Article 1</a>
    <a href="#article2">Article 2</a>
    <a href="#article3">Article 3</a>
  </nav>
</header>
<main>
  <article id="article1">
    <h2>Article 1</h2>
    <p>
      Lorem ipsum dolor 
      sit amet, consectetur adipiscing elit. 
      Curabitur tristique odio ac sem congue luctus.
      
---- C O D E   O M I T T E D ----

    </p>
  </article>
  <article id="article2">
    <h2>Article 2</h2>
    <p>
      Lorem ipsum dolor 
      sit amet, consectetur adipiscing elit. 
      Curabitur tristique odio ac sem congue luctus.
      
---- C O D E   O M I T T E D ----

    </p>
  </article>
  <article id="article3">
    <h2>Article 3</h2>
    <p>
      Lorem ipsum dolor 
      sit amet, consectetur adipiscing elit. 
      Curabitur tristique odio ac sem congue luctus.
      
---- C O D E   O M I T T E D ----

    </p>
  </article>
</main>

---- C O D E   O M I T T E D ----

Code Explanation

The code above will render the following:transition Demo

Some things to note:

  1. You will need to open TransformsTransitions/Demos/transition.html in the browser and interact with the page to see the transition effects.
  2. We added transition effects to the links at the top when they are hovered over.
  3. We added transition effects to the article elements when they are the target. article1 is the target in the image above.

transform

The transform property provides ways to rotate, scale, skew, and translate block elements. It can be combined with transition to create cool animation effects. transform takes several transform function values. It can take one or more of the following functional notations in the same rule:

  1. rotate()
  2. scale()
  3. skew()
  4. translate()

transform also takes the keyword none, which means no transforms should be applied.

matrix() and 3D Transforms

The matrix() function (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix) is an all-in-one function that can do any transform, but its notation is exceedingly complicated, is not author-friendly, and is not as commonly used as the other functions.

transform also takes 3D function values (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Syntax) used to create 3D transforms. These are not commonly used.

Rotation

The rotate() function takes a positive or negative angle value in degrees (deg), gradians (grad), radians (rad), or turns (turn). Positive values rotate the element clockwise and negative values rotate the element counterclockwise. You can see some examples below. We will be changing this 130px by 130px div element: Unchanged div

transform: rotate(45deg);

rotate1

transform: rotate(-75deg)

rotate2

These examples can be found in TransformsTransitions/Demos/transform-examples.html.

Scale

The scale() function takes one or two number values without units. If negative values are used, the element is flipped.

  1. If one value is used, it is the scaling factor both horizontally and vertically.
  2. If two values are used, the first is the scaling factor horizontally and the second is the scaling factor vertically.

You can see some examples below. We will be changing this 130px by 130px div element: Unchanged div

transform: scale(1.5);

scale1

transform: scale(-1.5, 1)

scale2

These examples can be found in TransformsTransitions/Demos/transform-examples.html.

Skew

The skew() function takes one or two positive or negative angle values in degrees (deg), gradians (grad), radians (rad), or turns (turn).

  1. If one value is used, it skews the element horizontally.
  2. If two values are used, the first value skews the element horizontally, and the second value skews the element vertically.

You can see some examples below. We will be changing this 130px by 130px div element: Unchanged div

transform: skew(20deg);

skew1

transform: skew(-20deg, 10deg)

skew2

These examples can be found in TransformsTransitions/Demos/transform-examples.html.

Translate

The translate() function takes one or two positive or negative length values. Positive values move the element right or down, and negative values move the element left or up.

  1. If one value is used, it moves the element horizontally.
  2. If two values are used, the first value moves the element horizontally, and the second value moves the element vertically.

You can see some examples below. We will be changing this 130px by 130px div element: Unchanged div

transform: translate(50px);

translate1

transform: transition(-50px, 50px)

translate2

These examples can be found in TransformsTransitions/Demos/transform-examples.html.

You can see more uses of transform in the following demo. Note that you will also see more examples of transition and see transform and transition used together.

Code Sample:

TransformsTransitions/Demos/transform-styles.css
body {
  background-color: aliceblue;
}

article {
  background: rgb(155, 170, 170);
  border: black solid 1px;
  border-radius: 0.5rem;
  padding: 0 0.5rem 0.2rem;
  margin: 0.5rem;
  overflow: hidden;
  height: 50px;
  width: 100px;
}

article a:visited {
  color: blue;
}

article img {
  display: block;
  left: -5px;
  bottom: 10px;
  opacity: 0;
  position: relative;
  margin: -1rem;
}

article a.read-more {
  display: none;
}

article:target {
  background: white;
  height: auto;
  transform: rotate(-360deg);
  transition: background 2s, 
    transform 0.7s ease-out;
  width: 300px;
}

article:target h2 a {
  color: black;
  text-decoration: none;
}

article:target img {
  opacity: 1;
  left: 250px;
  transform: rotate(720deg);
  transition: opacity 3s 0.5s, 
    transform 1s 0.8s linear, 
    left 1s 0.8s linear;
}

article:target img + a.read-more {
  background: rgba(166, 212, 252, 0.4);
  border-radius: 0.5rem;
  box-sizing: border-box;
  display: block;
  opacity: 0;
  position: absolute;
  left: 240px;
  bottom: 2px;
  width: 50px;
  height: 45px;
  padding: 0 10px;
  text-decoration: none;
  transform: scale(0.4);
  transition: all 1s;
}

article:target img + a.read-more:hover {
  opacity: 1;
  transform: scale(1.1);
  transition: all 1s;
}

Code Sample:

TransformsTransitions/Demos/transform.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>transform</h1>
<main>
    <article id="article1">
      <h2><a href="#article1">Article 1</a></h2>
      <p>
        Lorem ipsum dolor 
        sit amet, consectetur adipiscing elit. 
        Curabitur tristique odio ac sem congue luctus.
        
---- C O D E   O M I T T E D ----

      </p>
        <img alt="Books" src="images/books.png">
        <a href="article1.html" class="read-more">Read more!</a>
    </article>
    <article id="article2">
      <h2><a href="#article2">Article 2</a></h2>
      <p>
        Lorem ipsum dolor 
        sit amet, consectetur adipiscing elit. 
        Curabitur tristique odio ac sem congue luctus.
        
---- C O D E   O M I T T E D ----

      </p>
        <img alt="Books" src="images/books.png">
        <a href="article2.html" class="read-more">Read more!</a>
    </article>
    <article id="article3">
      <h2><a href="#article3">Article 3</a></h2>
      <p>
        Lorem ipsum dolor 
        sit amet, consectetur adipiscing elit. 
        Curabitur tristique odio ac sem congue luctus.
        
---- C O D E   O M I T T E D ----

      </p>
        <img alt="Books" src="images/books.png">
        <a href="article3.html" class="read-more">Read more!</a>
    </article>
    <article id="article4">
      <h2><a href="#article4">Article 4</a></h2>
      <p>
        Lorem ipsum dolor 
        sit amet, consectetur adipiscing elit. 
        Curabitur tristique odio ac sem congue luctus.
        
---- C O D E   O M I T T E D ----

      </p>
        <img alt="Books" src="images/books.png">
        <a href="article4.html" class="read-more">Read more!</a>
    </article>
</main>
</body>
</html>

Code Explanation

The code above will render the following:transform Demo

Some things to note:

  1. You will need to open TransformsTransitions/Demos/transform.html in the browser and interact with the page to see the effect of these styles.
  2. We added transform and transition effects to the article elements when they are the target.
  3. We added transform and transition effects to the img and a elements within the article elements.
  4. Websites rarely use this many transforms and transitions; however, the demo gives you a sense of what can be accomplished with them.

Transforms and Transitions

Duration: 25 to 40 minutes.

In this exercise, you will continue to work with the Running Blog page.

  1. Open TransformsTransitions/Exercises/running-blog.html in your editor.
  2. Open TransformsTransitions/Exercises/blog-styles.css. This is the stylesheet from the solution to the Positioning exercise. Feel free to continue working from your own stylesheet.
  3. Using your new knowledge of transforms and transitions add some styles to this page. The object of this exercise is to practice using the properties covered in this lesson. Also, feel free to add or change any other properties that you know.
  4. When you are done, open running-blog.html in your browser to see the results. You are welcome to go back to the code and continue to work.

You can design it however you want, or you can try to:

  1. Make the tiny runner move right, flip and come back when it is within the target.
  2. Skew the back-to-top links when they are hovered over.
  3. Transition the width and color of the articles in the all section when they are the target.

Solution:

TransformsTransitions/Solutions/blog-styles.css
html {
  font-size: 16px;
}

body {
  background: aliceblue;
}

header {
  margin: auto;
  min-width: 500px;
  width: 80%;
}

#title {
  margin: auto;
  width: 90%;
}

header h1 {
  margin: auto;
  width: 220px;
}

header h1 img {
  left: 0;
  position: relative;
}

header p {
  margin: auto;
  width: 400px;
}

header nav {
  border-radius: 0.4rem;
  margin: 0.5rem auto;
  padding: 0.2rem 1rem;
  width: 140px;
}

nav, 
nav ul,
nav ol {
  margin: 0;
}

a, a:visited {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: purple;
}

a:active {
  color: red;
}

main {
  background: white;
  margin: 1rem auto 8rem;
  min-width: 500px;
  padding: 1rem;
  width: 80%;
}

main nav {
  background: lightgray;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

section {
  border-top: 0.2rem solid black;
  padding: 1%;
  width: 98%;
}

section h2 img {
  left: 0;
  position: relative;
}

div:target h1 img,
section:target h2 img {
  left: 100px;
  position: relative;
  transform: scale(-1, 1) translate(100px);
  transition: left 1s, transform 1s 1s linear;
}

article {
  border: 1px solid black;
  margin: 1rem auto;
  padding: 0 0.5rem;
  width: 96%;
}

article:target h3 {
  text-decoration: underline;
}

article img {
  float: right;
  margin: 0.5rem 0 0.5rem 0.2rem;
}

article p:last-child::after {
  content: "";
  display: block;
  clear: both;
}

a.back-to-top {
  background: rgb(158, 170, 202);
  border: rgb(70, 70, 100);
  border-radius: 0.5rem;
  border-style: none solid solid none;
  border-width: 0 0.2rem 0.2rem 0;
  color: navy;
  display: block;
  float: right;
  font-size: 1rem;
  height: 20px;
  margin: 0.2rem 0.2rem 0.2rem 0.5rem;
  padding: 0.2rem;
  text-decoration: none;
  text-align: center;
  width: 90px;
}

section::after {
  content: "";
  display: block;
  clear: both;
}

a.back-to-top:hover {
  transform: skew(-10deg);
  transition: 0.2s;
}

a.back-to-top:active {
  color:#cce;
  border-width: 0 0.1rem 0.1rem 0;
}

#all article {
  background: #cce;
  height: 30px;
  margin: 0.5rem 0;
  overflow: hidden;
  padding-bottom: 15px;
  width: 75px;
}

#all article:target {
  background: white;
  height: auto;
  width: 80%;
  transition: all 0.5s linear;
}

#all article:target h3 a {
  color: black;
}

footer {
  background: lightgray;
  font-size: medium;
  font-style: italic;
  min-width: 640px;
  width: 100%;
  margin: 0 -1rem;
  padding: 0.2rem 1rem;
  position: fixed;
  bottom: 0;
}

footer h2 {
  margin: 0;
}

footer a {
  text-decoration: underline;
  margin: 0.4rem;
}

footer a[href^='mailto'] {
  margin: 0;
}

Code Explanation

You will need to open TransformsTransitions/Solutions/running-blog.html in the browser and interact with the page to see the transform and transition effects we added.