css transition,transform공부

transition

css 속성을 이용해 변화를 줄때 부드럽게 만들수있게 해주는기능

transition: all 0.4s ease-in-out 0.1s;

transion: property duration time-function delay

순서대로
property : 어떤 속성에 transition을 적용할것인지 보통 하나하나 지정하기 귀찮기에 all을 적어 한번에 다 지정한다.

duration : transition이 걸리는 시간 전환 시간을 정한다.

time-function : 속도 패턴을 정한다.
ease-in-out - 천천히 정상 빠르게
linear - 일정한 속도
다른것들도 많지만 필요한 상황에 따라 적용해 보며 맞게 사용한다.

delay : 요청 받은후 실제 사용까지 걸리는 시간

ex)

<div class="transition">마우스 올려라</div>

.transition {
  width: 200px;
  height: 100px;
  background-color: gray;
  transition: all 0.4s ease-in-out;
}

.transition:hover {
  width: 350px;
  height: 100px;
  background-color: black;
  color: white;
}

div 태그 위에 마우스를 올리면 서서히 길이가 늘어나면서 배경색이 검정으로 변한다.

transform

요소에 이동, 회전 확대/축소, 비틀기 등의 변형 할수있다.
translate - 요소의 이동
scale - 확대/축소
skew - 비틀기
rotate - 회전

transition과 transform을 이용해 애니메이션 효과 만들기

<div class="box">
      <span class="text1">이</span>
      <span class="text2">상</span>
      <span class="text3">헌</span>
      <span class="text4">개</span>
      <span class="text5">간</span>
      <span class="text6">지</span>
      <span class="text7">좆</span>
      <span class="text8">간</span>
      <span class="text9">지</span>
    </div>

.box {
  width: 600px;
  height: 120px;
  background-image: linear-gradient(to top, orange, red);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.box span {
  font-size: 36px;
  color: white;
  font-weight: 600;
}
.text1 {
  transition: transform 0.4s ease-in-out;
}
.text2 {
  transition: transform 0.4s ease-in-out 0.1s;
}
.text3 {
  transition: transform 0.4s ease-in-out 0.2s;
}
.text4 {
  transition: transform 0.4s ease-in-out 0.3s;
}
.text5 {
  transition: transform 0.4s ease-in-out 0.4s;
}
.text6 {
  transition: transform 0.4s ease-in-out 0.5s;
}
.text7 {
  transition: transform 0.4s ease-in-out 0.6s;
}
.text8 {
  transition: transform 0.4s ease-in-out 0.7s;
}
.text9 {
  transition: transform 0.4s ease-in-out 0.8s;
}
.box:hover span {
  transform: translateY(-30px);
}

box위에 마우스가 올라가면 물결로 글자가 올라간다.
물결치는 효과를 위해 각 텍스트에 delay .1s 를 적용