본문 바로가기
Language/CSS

CSS 애니메이션

by Krystal K 2022. 5. 5.

<Today's Goals>

  • 애니메이션 속성을 이해한다.
  • 애니메이션을 이용해 요소를 이동시킨다.
  • 애니메이션을 이용해 시간차 효과를 줄 수 있다.
  • 애니메이션을 이용해 움직임의 속도를 조절할 수 있다.

<What i learned>

  • %단위로 키프레임을 지정할 수 있다. 이를 이용해 더 동적인 무빙을 만들어낼 수 있다.

<Questions>

  • 애니메이션을 반복할 경우, animation-delay 가 처음에만 적용되는데, 반복 될 때마다 지연되도록하는 방법은?

애니메이션이란?

CSS3의 animation 속성을 사용하여 자바스트립트나 플래시 없이 웹요소에 애니메이션을 추가할 수 있다.

 

Keyframes : 애니메이션이 바뀌는 지점을 @keyframes 속성을 이용해 정의.

 

from : 애니메이션의 시작 프레임를 설정함

to : 애니메이션의 끝 프레임를 설정.

@keyframes keyframesName {
  from {
transform: translate(30px, 20px)
  }

  to {
transform: translate(100px, 0)
  }
}

중간의 키프레임을 %단위로 지정할 수 있음

@keyframes keyframesName {
  0% {
transform: translate(0, 0)
  }
  30% {
transform: translate(30px, 20px)
  }
  70% {
transform: translate(130px, 70px)
  }
  100% {
transform: translate(100px, 0)
  }
}

 

에니메이션 종류

  • animation-name : 애니메이션 이름을 지정
  • animation-delay : 애니메이션 지연시간을 지정 (애니메이션이 반복될 경우 처음에만 적용)
  • animation-direction : 애니메이션 진행방향 지정 (alternate : 왔던대로 되돌아감/ normal : 원래방향으로)
  • animation-duration : 애니메이션 실행시간을 지정
  • animation-iteration-count : 애니메이션 반복 회수를 지정
  • animation-play-state : 애니메이션 재생상태를 지정 (paused 정지)
  • animation-timing-function : 애니메이션 속도 곡선 지정

속도 곡선 종류

  • linear : 시작부터 끝까지 똑같은 속도로 진행
  • ease : 처음은 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝남
  • ease-in : 시작을 느리게
  • ease-out : 느리게 끝남
  • ease-in-out : 느리게 시작하고 느리게 끝남
  • cubic-bezier : 직접 베이직 함수를 정의해서 사용 / n에서 사용할 수 있는 값은 0~1사이

한번에 표시하기

animation: 이름 | 시작지연시간 | 재생속도 | 재생시간 | 반복횟수 | 진행방향

 

애니메이션 적용 예시

<style>
        *{ margin: 0; padding: 0;}
        .box01{ width: 100px; height: 100px;
                position: absolute; top: 0; left: 0;
                background-color: darkgray;
                animation-name:  ani01;
                animation-delay: 1s;
                animation-duration: 10s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-timing-function: ease-in-out;
            }
        @keyframes ani01{
            from{ /*0%*/
                position: absolute; top: 0; left: 0;
            }

            30%{ 
                width: 100px; height: 100px;
                background-color: darkred;
                position: absolute; top: 500px; left: 100px;
            }
            60%{ width: 300px; height: 100px;
                background-color: blueviolet;
                position: absolute; top: 100px; left: 500px;
            }

            80%{ width: 200px; height: 200px;
                background-color: aquamarine;
                position: absolute; top: 300px; left: 1000px;
            }
            to{ /*100%*/
                background-color: chartreuse;
                position: absolute; top: 700px; left: 900px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box01">box01</div>
</body>

 

728x90

'Language > CSS' 카테고리의 다른 글

CSS display 속성  (0) 2022.05.08
CSS속성 transition 시간에 따른 속성 적용  (0) 2022.05.06
CSS border 여러 속성  (0) 2022.04.24
CSS 인라인 요소 , 블록레벨 요소  (0) 2022.04.22
CSS gradient 속성  (0) 2022.04.19