01.CSS 기초 - animation 효과

ID짱재·2021년 3월 17일

CSS

목록 보기

7/15

🌈 animation 효과

🔥 transition 효과

🔥 animation 효과

🔥 transform 효과

1. transition 효과

CSS 속성 값의 변화에 대해 옵션을 설정하여 일정 시간에 걸쳐 일어나도록 하거나, 어떤한 애니메이션과 같은 효과를 적용시키는 기능
일반적으로 상태가 변화하는 과정에 개입하여 효과를 풍부하게 만듬
trasition-property : 트랜지션 적용 대상이 되는 속성 지정
trasition-duration : 트랜지션 작용 시간 설정
- linear : 같은 속도로 균일하게
- ease-in : 점점 빨라짐
- ease-in-out : 점점빨라졌다가 느려짐
- ease-out : 점점 느려짐
- cubic-bezier : 직접 설정
trasition-timing-function : 트랜지션 속도에 대한 스타일 지정
trasition-delay : 얼마나 지연했다가 트랜지션을 작동시킬지에 대한 설정
일반적으로는 위 4가지 속성을 각각 지정하기 보다는 한번에 지정함
대상되는 속성값을 all을 사용하면 모든 효과들에 적용됨
🔍 selector { transition : property duration function delay;}
- div:hover { transition : width 3s easy-in-out 0.1;}
- input:focus { transition : all 2s linear;}
참고 : https://dbaron.org/css/timing-function-graphs

✍🏻 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The time</title>
    <style>
      a {
        color: white;
        background-color: tomato;
        text-decoration: none;
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 55px;
        transition: all 1s ease-in-out;
      }
      a:hover {
        border-radius: 30px;
        color: tomato;
        background-color: wheat;
        padding-right: 200px;
      }
    </style>
  </head>
  <body>
    <a href="#">Go home</a>
  </body>
</html>

2. animation 효과

animation은 transition과 유사하게 요소에 적용되는 CSS 스타일을 부드럽게 전환시킴
transition 보다 더 세밀하게 단계(처음,중간,끝 등)를 나눠 전환 효과를 적용 가능
이런 세밀한 단계는 @keyframse를 사용하여 설정함

1) animation 사용법

@keyframes 스타일 : 시작(0% 또는 from), 마지막(100% 또는 to), 중간에 여러 구간을 나눌 수 있음

animation 설정

animation-name : keyframes 이름 넣기

animation-duration : 애니메이션 작동 시간 지정

animation-timing-function : 속도에 따른 움직임 스타일 지정

animation-iteration-count : 반복 횟수 지정(디폴트는 1이며, infinite는 무한 반복)

animation-delay : 얼마나 대기하였다가 작동하는지 설정

anaimation-fill-mode

none : 처음스타일 ⇢ 0% ⇢ 100% ⇢ 처음 스타일

forwards : 처음스타일 ⇢ 0% ⇢ 100% ⇢ 100%

backwards : 0% ⇢ 0% ⇢ ⇢ 100% ⇢ 처음 스타일

both : 0% ⇢ 0% ⇢ ⇢ 100% ⇢ 100%

anaimation-play-state

paused : 중지상태

running : 실행 상태(default 값)

✍🏻 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The time</title>
    <style>
      @keyframes rotateX_animation {
        0% {
          transform: rotateX(0);
        }
        25% {
          transform: rotateX(120deg);
        }
        50% {
          transform: rotateX(240deg);
        }
        50% {
          transform: rotateX(360deg);
        }
      }
      .rotateX {
        width: 200px;
        height: 200px;
        background-color: mediumspringgreen;
        border: 3px solid;
        border-radius: 50%;
        animation: rotateX_animation 10s linear;
      }
      @keyframes rotateY_animation {
        from {
          transform: rotateY(0);
        }
        to {
          transform: rotateY(360deg);
        }
      }
      .rotateY {
        width: 200px;
        height: 200px;
        background-color: tomato;
        border: 3px solid;
        border-radius: 50%;
        animation: rotateY_animation 5s ease-in-out infinite;
      }
    </style>
  </head>
  <body>
    <div class="rotateX"></div>
    <div class="rotateY"></div>
  </body>
</html>

3. transform 효과

transform은 요소의 회전, 크기 조절, 기울이기, 이동 효과를 부여하는 함수(function)을 제공
그림 등 대상을 3D로 변형(이동, 회전, 뒤집기, 뒤틀기 등) 가능하게 하는 기술이며, margin이나 padding에 영향을 받지 않음
또한 transform 효과는 CSS animiation이나, transition과 함께 사용

1) tranform 사용법

selector:state { transform : 함수;}

transform의 함수는 3차원 공간에서 x,y,z 요소로 설정함

🔍 selector:state { transform : translate(x,y) } : 요소 위치를 가로로 x, 세로로 y만큼 이동

🔍 selector:state { transform : translateX(n) } : 요소 위치를 가로로 x만큼 이동

🔍 selector:state { transform : translateY(n) } : 요소 위치를 세로로 Y만큼 이동

🔍 selector:state { transform : sacle(x,y) } : 요소 크기를 가로로 x배, 세로로 y배 확대 또는 축소

🔍 selector:state { transform : sacleX(n) } : 요소 크기를 가로로 x배 확대 또는 축소

🔍 selector:state { transform : sacleY(n) } : 요소 크기를 세로로 y배 확대 또는 축소

🔍 selector:state { transform : skew(x,y) } : 요소를 가로로 x도, 세로로 y도 만큼 기울임

🔍 selector:state { transform : skewX(n) } : 요소를 가로로 x도 만큼 기울임

🔍 selector:state { transform : skewY(n) } : 요소를 세로로 y도 만큼 기울임또는 축소

🔍 selector:state { transform : rotate(n) } : 요소를 주어진 각도 만큼 회전

✍🏻 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .box {
        width: 200px;
        height: 200px;
        margin: 20px;
        border: 1px solid;
        text-align: center;
        font-size: 20px;
        border-radius: 15px;
      }
      .box1 {
        background-color: cornflowerblue;
      }
      .box2 {
        background-color: coral;
      }
      .box3 {
        background-color: papayawhip;
      }
      .box4 {
        background-color: darkseagreen;
      }
      .translate:hover {
        transition: transform 2s;
        transform: translate(30px, 30px);
      }
      .scale:hover {
        transition: transform 2s;
        transform: scale(2, 2);
      }
      .skew:hover {
        transition: transform 2s;
        transform: skew(30deg, 30deg);
      }
      .rotate:hover {
        transition: transform 2s;
        transform: rotate(360deg);
      }
    </style>
  </head>
  <body>
    <div class="box box1 translate">translate</div>
    <div class="box box2 scale">scale</div>
    <div class="box box3 skew">skew</div>
    <div class="box box4 rotate">rotate</div>
  </body>
</html>

transform은 요소의 정가운데 기준점을 기준으로 변형을 시키는데 이 기준점을 변형시키고자할 때는 transform-origin 속성을 사용
참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin