[TIL] Transitions

노마드코더의 강의를 보고 정리한 것 입니다

Transition

state가 없는 요소에 붙어야한다 ex : :hover 와 같은 가상요소 외에
변화되는 속성을 적용시켜놔야 트랜지션이 적용 된다

transition : `..변경되는 css속성` `변하는데 걸렸으면 하는 시간` `timing`
-> 첫번째 인자로 들어가는게 바뀔 때 2번째에 준 시간으로 적용된다

transition : background-color 10s ease-in-out

a {
  border-radius : 5px
  transition : border-radius 1s,
  color 2s
}

a:hover{
  border-radius: 20px;
  color: tamato;
}

transition은 가장 처음 생겨난곳(root) , element에 있어야 한다

transition-timing-function 속성

1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어,
   그다음에는 빨라지고, 마지막에는 다시 느려진다
3. ease-in : 전환(transition) 효과가 천천히 시작된다
4. ease-out : 전환(transition) 효과가 천천히 끝난다
5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝난다

---

Transformation

transform

MDN : CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

다른 요소의 box를 변형시키지 않고 원하는 요소를 이동시키기 위해 사용한다
transition으로 요소를 지정하고 옮길 수 있다

옮기고 싶을 때 transLateX , transLateY
돌리고 싶을 때 rotate
비스듬히 기울일 때 SKew
크기조절 scale

@keyframes `애니메이션이름`{
  from{
  
  }
  
  to{
  
  }
}

@keyframes `애니메이션이름`{
  0% {
  	transfrom : ratateY(0);
  }
  
  50% {
    	transfrom : ratateY(180deg) translateY(100px);
  }
  
  100% {
    	transfrom : ratateY(0);
  }
}
/* 실행되는 위치를 %로 단계를 나뉘어주면 애니메이션을 실행시켰다가 다시 돌아오게 할 수 있다*/

root { // 적용할 코드
  animation : 애니메이션이름 시간 적용할트랜지션timing속성
}

---

transform (mdn)

MDN : CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

/* 키워드 값 */
transform: none;

/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

---

참고한 사이트

http://www.tcpschool.com/css/css3_transform_transition
http://css3.bradshawenterprises.com/transitions/