Dahye Ji

Posted on Nov 10, 2021

CSS transition, transform

#css #transition #transform

Transition is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay. CSS transitions allow you to change property values smoothly over a given duration.

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    div:hover{
      width: 300px;
      height: 300px;
      background-color: blue;
      transition: all 2s;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

transition-delay

transition-delay specifies the duration to wait before starting a property's transition effect when its value changes.

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
    body{
        display: flex;
    }
    div{
      width: 100px;
      height: 100px;
      background: red;
      font: bold;
      color: white;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .first{
        transition-delay: 0s;
    }
    .second{
        transition-delay: 1s;
    }
    .third{
        transition-delay: 2s;
    }
    div:hover{
        background: blue;
    }
  </style>
</head>
<body>
  <div class="first">0초</div>
  <div class="second">1초</div>
  <div class="third">2초</div>

</body>
</html>

If the value of transition-delay is 0(default value), it will begin the transition effect immediately. You can use s(second)and ms(millisecond) to set the delay. You can also give negative value for the delay. If it has the negative value for it, it will start the effect immediately but from the middle of the effect.(If the transition-duration is set to -1s, it will effect immediately but will show the effect that's 1s passed.(negative value starts an animation before 0 would, but the animation is hidden, until the time the value points has elapsed.)

transition-property

div {
  transition: width 2s, height 4s;
}

transition-property specifies the name of the CSS property the transition effect is for.
property values for transition-property:

all: all properties that can transition will
none: no properties will transition
property: specify the name of css property that you can give transition effect.

 transition-property: width, height;

initial: giving default value for the property.
inherit: takes parent's value.

<!DOCTYPE html>
<html>
<head>
    <title>transition-property property예제</title>
    <style>
        div {
          width: 100px;
          height: 100px;
          background-color: red;
          -webkit-transition-property: width, height; /* Safari */
          -webkit-transition-duration: 2s; /* Safari */
          transition-property: width, height;
          transition-duration: 2s;
        }

        div:hover {
          width: 200px;
          height: 200px;
          background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

transition-property: width, height is specified so width and height expand gradually during 2s but background-color changes to blue drastically.

transition-timing-function

transition-timing-function specifies the speed curve of the transition effect.

Values for timing-function
ease: equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the transition, slowing back down at the end.
linear: equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), transitions at an even speed.
ease-in: equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the transition speed increasing until complete.
ease-out: equal to cubic-bezier(0, 0, 0.58, 1.0), starts transitioning quickly, slowing down the transition continues.
ease-in-out: equal to cubic-bezier(0.42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again.
step-start: it's same as steps(1, start)
step-end: it's same as steps(1, end)
steps(int, start|end): if you put integer at int, specify start and end. Then it will cut off at stat or end.
cubic-bezier(n,n,n,n): lets you define your own values in a cubic-bezier function
initial: giving default value for the property.
inherit: takes parent's value, etc. Most timing functions use .
ease-out: equal to cubic-bezier(0, 0, 0.58, 1.0), starts transitioning quickly, slowing down the transition continues. timing-function example

transition

You can also write all of them at once using transition

Also, when you go to developer's tool, you can check these

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

CSS transition properties can be specified one by one like above or by using the shorthand property transition like below.

div {
  transition: width 2s linear 1s;
}

transform

transform lets you rotate, scale, move, skew, or translate an element(2d, 3d transformation to an element), etc.

scale

scale is used when you resize the element. The difference with using width, height is that if you change width and height, the element get bigger from right, bottom but if you use scale, it gets bigger from the centre.
scale(1): 1 means 100% here. If you write lager number than 1, then it will change the size of element.

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
        .box{
            width:100px;
            height:100px;
            background:dodgerblue;
            transition:all 1s;
        }

        .box:hover{
            transform: scale(2);
        }

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

scale(2) is used above, so it will get twice bigger. scale can get two values which is x and y. scale(x,y) (if you write only one value it means the same value for x and y)

rotate

it rotates an element around the a fixed point on 2D plane,, without deforming it.

div {
 transform:rotate(360deg)
 /* this also can be used as transform:rotate(1turn). */
}

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
        .box{
            width:100px;
            height:100px;
            background:dodgerblue;
            transition:all 1s;
        }

        .box:hover{
            transform:rotate(360deg);
        }

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

translate

translate repositions an element in horizontal and/or vertical directions.
It can have single value

transform: translate(200px);
transform: translate(50%);

or Double value - translate(x,y)

transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

if you give negative number, it will move to the opposite direction.

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
        .box{
            width:100px;
            height:100px;
            background:dodgerblue;
            transition:all 1s;
        }

        .box:hover{
            transform:translate(100px,100px);
        }

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

skew

It defines a transformation that skews an element on an element on 2D plane. It distorts each poing within an element by certain angle in the horizontal and vertical directions. The effect is as if you grabbed each corner of the element and pulled them along a certain angle.
It uses deg(degree) like rotate.

 transform: skew(10deg);
 transform: skew(15deg, 15deg);

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
        .box{
            width:100px;
            height:100px;
            background:dodgerblue;
            transition:all 1s;
        }

        .box:hover{
            transform:skew(40deg);
        }

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

transform-origin

transform-origin sets the origin for an element's transformations.
It can have values of left, right, top, bottom, center or can specify it with numbers like transform-origin: 0, 0; (x,y)

transform-origin: center;
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px;

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
        .box{
            width:100px;
            height:100px;
            background:dodgerblue;
            transition:all 1s;
            transform-origin:left top;
        }
        .box:hover{
            transform:rotate(360deg);
        }

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

Practice - Button

Code for button above

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,800;1,700&display=swap');
        /* hover/before/transform/(animation)/transition */

        .btn {
            position: relative;
            width: 200px;
            height: 50px;
            font-weight: 700;
            color: #ff3550;
            background-color: white;
            border: 1px solid #ff3550;
            border-bottom: 10px solid #ff3550;
            border-radius: 24px;
            font-size: 23px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            font-family: 'Public Sans', sans-serif;
            text-align: center;
            padding-top: 20px;
            cursor: pointer;
            margin: 100px;
            transition: all .5s;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            padding-top: 20px;
            top: -23px;
            left: 0;
            width: 200px;
            height: 10px;
            background: #ff3550;
            transform: translateY(300px);
            transition: all .5s;
        }

        .btn:hover::before {
            content: '';
            cursor: pointer;
            transform: translateX(0);
        }

        .btn:hover {
            color: #ff3550;
            border: 1px solid white;
            z-index: 1;
            transform: scale(0.97);
        }
    </style>
</head>

<body>
    <div class="btn">Click Me!</div>
</body>

</html>

When to use translate or position.

We can move element's coordinates using position. Isn't it the same for the translate?

If you are positioning elements for static website, you can use position but it's better to use translate if it's for an animation or if you have to move elements dynamically.

DEV Community