DevSSOM

HTML, CSS - Animation 속성 본문

HTML, CSS

HTML, CSS - Animation 속성

데브쏨 2021. 8. 7. 22:28
반응형

Animation

Transition의 경우는 마우스를 오버했을 때와 같은 특정 조건이 필요한데, 조건에 상관 없이 이벤트를 적용할 때 사용하는 것이 Animation. 예를 들어, 웹사이트에 접속을 하자마자 마우스 움직임과 상관없이 오브젝트가 회전을 한다던가 움직인다던가 하는 효과를 만들 때 애니메이션을 사용함.

 

.animation {
    animation-name: changeWidth;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alternate;
}

@keyframes changeWidth {
    from { width: 300px; }
    to { width: 600px; }
}
  • name :  내가 만들 애니메이션의 이름을 정의할 때 사용. 위에서 changeWidth는 개발자가 임의로 작성한 이름. 
  • duration : 애니메이션이 동작하는 데 소요되는 시간.
  • timing-function : 속도의 성격을 규정하고자 할 때 사용.
  • delay : 웹사이트 접속하고 몇 초 후에 애니메이션이 동작되게끔 할 것인지 지연시간을 설정할 때 사용.
  • iteration-count : 애니메이션의 반복 횟수.
  • direction : 진행 방향을 의미.
    • 시작을 기준으로해서 끝으로 가는 게 normal (from->to, from->to)
    • 끝을 기준으로 시작으로 다시 돌아가는 게 reverse (to->from, to-> from)
    • 시작에서 끝으로 갔다가 다시 끝에서 시작으로 갔으면 좋겠다라고 반복효과를 적용할 때 alternate (from->to->from)
  • @keyframes ~ : 애니메이션 속성을 사용할 때 꼭 같이 써줘야 하는 명령어. 애니메이션과 @keyframes를 연동하기 위해서 name으로 지정한 애니메이션의 이름을 동일하게 @keyframes 옆에다 써주고, @keyframes 안에는 변화의 실제 결과값을 입력하면 됨. from 시작 지점에서는 width가 300px로 시작하고 to 끝나는 지점에서는 width가 600px로 변화하는 모습을 애니메이션으로 보여주게 됨.

 

+ animation도 transition과 마찬가지로, 속성값들을 한 줄로 작성할 수도 있음.

.animation{
    animation: changeWidth 3s linear 1s 6 alternate;
}

이때 항상 먼저 나온 시간이 duration이고, 그 이후에 나오는 숫자가 delay. 

 

 

 

연습문제

Q. 노란 박스의 가로폭이 반복적으로 길어지고 좁아지는 효과 만들어보기

  • animation-name으로 changeWidth를 입력하여, 애니메이션의 이름을 설정합니다.
  • animation-duration으로 3s를 입력합니다.
  • animation-timing-function으로 linear을 입력합니다.
  • animation-delay로 1s를 입력합니다.
  • animation-iteration-count으로 6을 입력하여, 6번 반복하게 합니다.
  • animation-direction으로 alternate을 입력하여, 앞뒤에서 번갈아 반복하게 합니다.
  • @keyframes changeWidth { }를 작성하여 from과 to를 설정합니다. from은 width: 300px;, to는 width: 600px;로 설정합니다.
<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>CSS Animation</title>
  
  <style>

    .animation {
        width: 300px;
        height: 300px;
        background-color: yellow;
        
        animation-name: changeWidth;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-iteration-count: 6;
        animation-direction: alternate;
    }
    
    @keyframes changeWidth {
        from { width: 300px; }
        to { width: 600px; }
    }

  </style>
  
</head>
<body>

  <div class="animation"></div>

</body>
</html>
728x90
반응형
저작자표시

'HTML, CSS' 카테고리의 다른 글

HTML, CSS - 미디어 쿼리  (0) 2021.08.09
HTML, CSS - Transform과 Animation을 결합할 때  (0) 2021.08.08
HTML, CSS - Transition 속성  (0) 2021.08.06
HTML, CSS - Transform 속성  (0) 2021.08.05
HTML/CSS - 간단한 쇼핑몰 만들기 실습 3(하단 영역)  (0) 2021.07.18
HTML/CSS - 간단한 쇼핑몰 만들기 실습 1(상단 영역)  (0) 2021.07.16
CSS - 레이아웃에 영향을 미치는 속성  (0) 2021.07.15
'HTML, CSS' 관련 글 more
댓글