CSS transition, transform
Tags: css, transition, transform
Published: 2021-11-10 13:25:21

Transition is a shorthand property for <strong><code>transition-property</code></strong>, <strong><code>transition-duration</code></strong>, <strong><code>transition-timing-function</code></strong>, <strong><code>transition-delay</code></strong>. CSS transitions allow you to change property values smoothly over a given duration. 
```html
<!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
<strong><code>transition-delay</code></strong> specifies the <em><u>duration to wait</u></em> before starting a property's transition effect when its value changes.
```html
<!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.(<em>negative value starts an animation before 0 would, but the animation is hidden, until the time the value points has elapsed.</em>)

#transition-property
```css
div {
  transition: width 2s, height 4s;
}
```
<strong><code>transition-property</code></strong> specifies the name of the CSS property the transition effect is for.
<strong><em>property values</em></strong> for <strong><code>transition-property</code>:
- 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.
```css
 transition-property: width, height;
```
- initial: giving default value for the property.
- inherit: takes parent's value.
```html
<!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>
```
<strong><code>transition-property: width, height</code></strong> is specified so width and height expand gradually during 2s but <strong><code>background-color</code></strong> changes to blue drastically.


#transition-timing-function
<strong><code>transition-timing-function</code></strong> 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), <u>starts transitioning slowly, speeds up, and then slows down again.</u>
- step-start: it's same as <code>steps(1, start)</code>
- step-end:  it's same as <code>steps(1, end)</code>
- 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 <strong'cubic bezier'</strong>.
- ease-out: equal to cubic-bezier(0, 0, 0.58, 1.0), starts transitioning quickly, slowing down the transition continues. 
[timing-function example](https://codepen.io/yunjipark0623/pen/zYOBjJd?editors=1100)

#transition
You can also write all of them at once using <strong><code>transition</code></strong>  
Also, when you go to developer's tool, you can check these
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0me8wl428u1vij80xqj.png)
```css
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.
```css
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.
<code><strong>scale(1)</strong></code>: 1 means 100% here. If you write lager number than 1, then it will change the size of element.  
```html
<!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. <code><strong>scale</strong></code> can get two values which is x and y. <code><strong>scale(x,y)</strong></code> (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. 
```css
div {
 transform:rotate(360deg)
 /* this also can be used as transform:rotate(1turn). */
}
```

```html
<!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
<code><strong>translate</strong></code> repositions an element in horizontal and/or vertical directions.
It can have single value
```css
transform: translate(200px);
transform: translate(50%);
```
or Double value -  <code><strong>translate(x,y)</strong></code>
```css
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.
```html
<!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.
```css
 transform: skew(10deg);
 transform: skew(15deg, 15deg);
```
```html
<!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
<strong><code>transform-origin</code></strong> <strong><em><u>sets the origin</u></em></strong> for an element's transformations.
It can have values of left, right, top, bottom, center or can specify it with numbers like <code>transform-origin: 0, 0;</code> (x,y)

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

```html
<!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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a8l047smwu2orc27qgj.gif)
##Code for button above
```html
<!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 <strong><code>position</code></strong> but it's better to use <strong><code>translate</code></strong> if it's for an animation or if you have to move elements dynamically.