CSS Transforms Transitions and Animations
Tags: css, html, webdev, javascript
Published: 2021-08-26 18:35:52

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqoite8aqwmqy70j1gc8.png)

I don’t know if you read our <a href="https://moeslink.com/scalable-vector-graphics/">Scalable Vector Graphics Tutorial</a>. If you have not read it, I encourage you to read it. That tutorial shows you how to learn to draw SVG graphics in HTML. In this tutorial we are going to learn how to transform and animate graphics using CSS. We are also going to show you how to animate text. Even though we recalled the SVG tutorial, we are not going to draw graphics at this time. All the graphics that we are going to use are from “<a href="https://pixabay.com">Pixabay</a>.” Let us start learning how to transform, and animate HTML Elements. 

__CSS Transforms__

 Firstly we are going to start with CSS Transforms.  We can apply transform to most. HTML elements. CSS Transforms let rotate, skew, scale, or translate HTML elements. CSS Transforms also use the same cartesian system of SVG graphics. We mentioned above the most useful CSS transforms. We are also going to show you how to apply them to your code. Below we show you a description for all CSS transform properties.

__Translate__

As its name implies, translations move HTML items to a different position in the browser. It's very easy to apply translations in CSS. The only thing we need to do is to declare the transform, and them call the translate function. This function can contain one or two parameters. The first parameter is the translation for the X axis. The second one is for the Y axis. We can also work with the function translate 3d. That function contains a third parameter.

``` css
#selector{
  transform: translate(50px); /* One parameter only translate the x value */
}

#selector2{
   transform: translate(20px, 30px);

}

#selector3{
  transform: translate3d(15px, 30px 45px); /*transform 3d function */

}
/******************************************************************************/
```

__Rotate__

We can also rotate any HTML item using CSS transforms. It's very easy to rotate items. We only need to declare the transform property, then we call the rotate function. Once we call the rotate function, we set its only parameter that is the angle of rotation. We can use our preferred unit for angles. Most times we use degrees; but we can also use radians, turns etc. 

``` css
#selector{
   transform: rotate(35deg);

}

/**********************************************************************/
```

__Scale__

The scale function is  another CSS transform function. This function serves to resize HTML elements. This function also contains two parameters.  These parameters don't specify any styling or angle; they are numbers. As you may already know, the first parameter indicates the X value as the second the Y value.  We can also have a third parameter if we apply the function scale 3d.

``` css
#selector{
   transform: scale(0.5, 1);
}

#selector2{
    transform: scale3d( 0.2, 0.5, 2.1);   /*scale 3d  function */
}

/********************************************************************************/
```
__Skew__

Another CSS transform function is the skew function. This function distorts  each point of any element with an angle. This function can contain one or two parameters. These parameters are the angles for the X values and the Y values. In the case it only contains one parameter that is the parameter for the X value. The effect this function causes is very nice. Once we get the correct angles we are going to see the result.

```css
#selector{
   transform: skew( 70deg, 15deg);
}

#selector2{
   transform: skew(0.3turn, 0.7turn) /* We can use turns rads degrees and many angle units */

}
```
__Using more than one transform function__

 It's possible to use more than one transform function in only one property. The only thing we need to do is to declare a function and then declare the other. We can use as many functions as we want.  We show you an example below with all the transform functions we explained. Although it's not necessary, we added some JavaScript to the transforms. After we click on buttons we can see the transforms. As you can see in the example below,  transforms are made using CSS classes.

{% codepen https://codepen.io/moreno8423/pen/NWjZXJV %}

__CSS Transitions__

CSS transitions define transition between two states of any HTML element.  There are four basic properties for CSS Transitions. They are the "delay",  "duration", "timing-function" and the "transition property". Their syntax is as we show you below.

``` css
#selector{
transition-property: margin-right;
transition-delay: 0.5s;
transition-timing-function: linear;
transition-duration: 3s;
}
```
<!-- wp:table {"className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes"><table><tbody><tr><td>transition-property </td><td>This is the property where transition would apply</td></tr><tr><td>transition-delay</td><td>This is the time that transition waits to start</td></tr><tr><td>transition-timing-function</td><td>Let us establish acceleration curve. (depends on duration)</td></tr><tr><td>transition-duration</td><td>This is the time the transition lasts</td></tr></tbody></table></figure>
<!-- /wp:table -->

__Transition shorthand__

We can use all these properties at once with only one line of code. We can  use the transition keyword and then specify all the other properties.

```css
#sample{
   transition: property duration timing-function delay;

}

#selector{
   transition: margin-right 5s linear 0.5s;


}

/**********************************************************/

```

__Using Transitions with transforms__

We can use transitions with transforms. Even though we are not diving too deep into transitions, we can see their effect in transforms. The only two properties we are using in the following example are the transition delay and duration. The example below is similar too the example we previously saw. Its only difference is that we applied transitions. In the results you can see the how the transitions occurs. It's a nicer effect.

{% codepen https://codepen.io/moreno8423/pen/WNjVGxy %}

__CSS Basic Animations__

We can see that CSS transforms along with transitions works as regular CSS animations. Besides transforms and transitions we can use animation properties. They serve  to animate elements from one style to another. There are many CSS Animation properties. The most used ones are "animation-name", "animation-duration", "animation-iteration-count", and "animation-delay". There are many others that we don't mention here. They can be found at the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS Animations MDN </a> We are going to see how  some of these properties work along with CSS keyframes.

<!-- wp:table {"className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes"><table><tbody><tr><td>animation-name</td><td>This is the name of the animation specified by a keyframe</td></tr><tr><td>animation-duration</td><td>This property specifies the time the animation is going to last</td></tr><tr><td>animation-delay</td><td>This property specifies the time to start the animation</td></tr><tr><td>animation-iteration-count</td><td>This property specifies how many times the animation runs</td></tr></tbody></table></figure>
<!-- /wp:table -->

__CSS Keyframes__

CSS keyframes specify the name, the starting, and the end of CSS Animations. Using keyframes we set the style that elements need to apply for animation. There are two types of keyframes. The first type is the one that set two functions. One of them is the function "from", and the other is the function "to". The other type of keyframe is the one that works with percentages. In that type of keyframe we can set as many functions as we want. We increase the percentage and apply the new style to the element.

```css
@keyframes my-keyframe{

  from{
     /*code here

  }

   to {
        /*code here*/
      }
}


@keyframes percentages{
   0%{
       /*code here*/
        }

      50% {
       /*code here */

      }

     100%{
          /*code here */
         }
}
```

__Animation Examples__

Here we are going to show you some animation examples. They show how CSS keyframes work. They have really nice effects on HTML elements. 

__Animating Text__

The first example we are going to see is animating text with keyframes. In this example we set the iteration count property to infinite. For that reason the animation won't stop. All these examples are only for showing the effect purposes. If you need some animations in your professional work you can apply properties differently.

{% codepen https://codepen.io/moreno8423/pen/vYZBVmd %}

__Another Text Animation__

There are endless possibilities to animate text using keyframes. The following example shows how to increase text size. It also shows how to bring a box to its place with some effect. 

{% codepen https://codepen.io/moreno8423/pen/ExXxrEK %}

__Appearing Text__

Appearing text  is somewhat more useful  in animations. Here we show you how to make text appear with CSS animations. That is really  nice.

{% codepen https://codepen.io/moreno8423/pen/YzQPjye %}

__Animating Graphics__

Here we show you another example about how to animate graphics. In the following example you can see that we  apply some rotation and translation to a graphic. We get a wonderful result.

{% codepen https://codepen.io/moreno8423/pen/ZEyzMVN %}

__From top to Bottom__

The example below is similar to the one above. We use some rotation for the ball, and also use the  translate "y" property. That property translates the Y axis while the translate "x" translates the X axis. See how the basketball dribble. This is wonderful!

{% codepen https://codepen.io/moreno8423/pen/OJgJdMz %}

__Animating an SVG Graphic__

We can create an animate SVG graphics. Most HTML elements can become animated elements.  The following example shows a crazy ellipse. That ellipse moves all the way around changing its  form.

{% codepen https://codepen.io/moreno8423/pen/vYZEaWz %}

__Conclusion__

This tutorial shows CSS transforms, transitions, and animations. It also shows how to deal. with them. They could be very useful depending on the task you want to perform  You can find a lot more of information in the<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"> MDN Animations </a> section. We hope you enjoyed and learn a lot with this tutorial

More at <a href="https://moeslink.com">Moe's Link </a>