transition, transform, animation

transition은 바뀌기 전 상태의 객체에게 부여해준다.

 

transition-property: width, background;

가로사이즈와 배경을 애니메이션에 적용하겠다.

transition-duration: 1s;

1초에 걸쳐서 바뀌게 하겠다.

 

이거를 합치면 아래와 같이도 가능하다.

transition : width 1s, background 1s;

 

이거를 또 모든 속성에 전환하겠다라고 하면

transition : 1s; 가 가능하다.

 

ease, ease-out : 빠르게 - 느리게 // 이 두 가지는 약간 다르다.

ease-in : 느리게- 빠르게

linear : 일정하게

이런것을 눈으로 보고 싶으면 easing function을 검색해서 표 + 애니메이션을 볼 수 있다.

 

합치면

transition: 1s ease; 이렇게 적용 가능하다.

 

 

transition step을 이용해서 단계별로 뚝뚝 끊어져서 보이게 가능.

 

딜레이를 넣으려면

transition : 지속시간, 딜레이;

즉, transition : 2s 1s; 이런식으로 가능.

 

---

transform

이동하거나 회전하거나 크기를 키우거나 비틀 때 사용한다.

비틀기의 경우 skewX(45deg) 이런식으로 축을 설정해서 비틀기 가능하다.

div {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 20px 20px;
  transition: 0.3s ease-in;
}
div:hover {
  transform: translate(100px, 100px) rotate(45deg) scale(1.5) skew(45deg);
}

 

회전 중심축을 설정할 수 있다.

transform-origin: 100% 100%; // 우측하단이다. right bottom이나 bottom right로 하면 우측하단이 마찬가지로 된다.

기본은 50% 50%으로 되어 있다.

기준은 아래와 같다.

      Y축

X축 ---------------------->

       ↓

---

transform3D

perspective를 넣어줘야 원근감을 느낄 수 있고

rotateY(45deg) 이런식으로 Y축을 기준으로 45도 돌린다 라고 이해하면 된다.

 

주의해야 되는 건 : perspective가 앞에 있어야 한다는 것.(함수처럼 사용 transform: perspective( ))

혹은 부모 자식간 관계면 부모에 적용해야 한다. (후손 여러대에 적용할 때. 속성처럼 사용 perspective)

div {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 20px 20px;
  transition: 0.3s ease-in;
}
div:hover {
  transform: perspective(500px) rotateY(45deg)
}

 

자식도 3차원을 반영하겠다 하면

transform-style: preserve-3d를 부모요소에 추가해야 한다. 부모에 했다고 후손들에 다 적용되는 건 아니고

부모한테 해야 자식한테 적용된다.

 

---

animation

div:hover {
  animation: test 2s infinite alternate ease both;
}
@keyframes test {
  0% {width:100px;}
  100% {width:50px;}
}

.box {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 20px 20px;
/*   transition: 0.3s ease-in; */
  animation : movemove 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes movemove {
  0% {transform : translate(0, 0)}
  25% {transform : translate(100px, 0)}
  50% {transform : translate(100px, 100px)}
  75% {transform : translate(0, 100px)}
  100% {transform : translate(0, 0)}
}

animation-fillmode 특성을 추가하면 애니메이션이 끝나는 위치에 멈추게 할 수 있다. 보통 both를 쓴다고 생각하자.

 

애니메이션에 마우스 올렸을때라던지 멈추게 할 수도 있다.

animation-play-state : paused를 hover에 추가하는 방식으로 말이다.