EverGiver

animation 속성 본문

Front-End (웹)/CSS

animation 속성

친절한개발초보자 2021. 9. 7. 15:03
728x90
CSS 애니메이션에서 사용하는 속성

 

- 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다.
- 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(key frame)이라고 한다.
- 키프레임은 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.

- transition 속성과 달리 별도의 동작 구문 없이도 스스로 애니메이션 효과를 발생시키는 css속성

종류 설명
@keyframes 애니메이션이 바뀌는 지점을 지정한다.
animation-delay 애니메이션의 시작 시간을 지정한다.
animation-direction 애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정한다.
animation-duration 애니메이션의 실행 시간을 지정한다.
animation-iteration-count 애니메이션의 반복 횟수를 지정한다.
animation-name @keyframes로 설정해 놓은 중간 상태를 지정한다.
animation-timing-function 키프레임의 전환 형태를 지정한다.
animation animation 속성을 한꺼번에 묶어서 지정한다.

 

cf) % 값 특징

@keyframes 원하는이름{
	0%{css속성} (시간이 10초일 경우 처음에 이동할 때 0초 돌아올때 10초)
	50%{css속성} (시간이 10초일 경우 처음에 이동할 때 5초 돌아올때 5초)
	80%{css속성} (시간이 10초일 경우 처음에 이동할 때 8초 돌아올때 2초)
	100%{css속성} (시간이 10초일 경우 처음에 이동할 때 10초 돌아올때 0초)
}​
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>animation #2</title>
    <style>
        *{margin:0;padding:0;}
        div{width:400px;height:400px;
            background-color:red;
            animation:abc 10s;}
        
        @keyframes abc{
            80%{margin-left:300px;}
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>​
  • 애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성
    - 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용해 바뀌는 지점을 설정한다.
    @kwyframes <이름> {
	<선택자> { <스타일> }
}​
    - 애니메이션을 여러 개 정의할 수 있으므로 이름을 이용해 애니메이션을 구분한다.
    - animation-name 속성으로 어떤 애니메이션을 사용할지 이름으로 구분한다.
    animation-name: <키프레임 이름> ¦ none​
    - @keyframes 속성에서 사용하는 선택자는 스타일 속성 값이 바뀌는 지점을 가리킨다.
      ▷ 애니메이션의 중간 지점을 추가하려면 시작 위치를 0%, 끝 위치를 100%로 놓고 50% 위치에 키프레임을 추가하면 된다.
      ▷ 시작과 끝 위치만 사용하려면 0%, 100%와 같은 값 대신 from과 to라는 키워드를 사용해도 된다
  • 애니메이션의 실행 시간을 지정하는 animation-duration 속성
    - 애니메이션이 얼마 동안 재생할 것인지 설정한다.
    animation-duration: <시간>​
    - 사용할 수 있는 값은 초(s)나 밀리초(ms)와 같은 시간 단위이다.
    - 기본값은 0이므로 animation-duration 속성값을 정하지 않으면 애니메이션은 실행되지 않는다.
  • 애니메이션의 방향을 지정하는 animation-direction 속성
    - 진행 방향을 바꿀 수 있다.
    animation-direction: normal ¦ reverse ¦ alternate ¦ alternate-reverse​

    종류 설명
    normal 애니메이션을 from에서 to로 진행한다. (기본값)
    reverse 애니메이션을 to에서 from으로, 원래 방향과는 반대로 진행한다.
    alternate 홀수 번째는 normal로, 짝수 번째는 reverse로 진행한다.
    alternate-reverse 홀수 번째는 reverse로, 짝수 번째는 normal로 진행한다
  • 반복 횟수를 지정하는 animation-iteration-count 속성
    - 반복 횟수를 정한다.
    animation-iteration-count: <숫자> ¦ infinite​
     
  • 종류 설명
    숫자 애니메이션의 반복 회숫를 정한다.
    infinite 애니메이션을 무한  
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>animation #1</title>
    <style>
        *{margin:0;padding:0}
        
        div{width:400px;height:400px;
            background-color:red;
            animation:abc 2s;
            animation-iteration-count:4}
        
        @keyframes abc{
            50%{margin-left:300px;background-color:blue;}
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>​
  • 애니메이션의 속도 곡선을 지정하는 animation-timing-function 속성
    - 애니메이션의 시작, 중간, 끝에서  속도를 지정하여 전체 속도 곡선을 만들 수 있다.
    animation-timing-function: linear ¦ ease ¦ ease-in ¦ ease-out
¦ ease-in-out ¦ cubic-bezier(n, n, n, n)​

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>animation #3</title>
    <style>
        *{margin:0;padding:0;}
        
        #a{width:400px;height:400px;
            background-color:red;
            animation:abc 3s;
            /*animation-delay:3s;*/
            animation-timing-function:linear;}
        
        @keyframes abc{
            50%{margin-left:500px;}
        }
    </style>
</head>
<body>
    <div id="a"></div>
</body>
</html>​
  • 애니메이션의 속성을 한꺼번에 표기하는 animation 속성
    - 애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다.
      (실행 시간을 지정하지 않으면 기본값으로 0이 적용되어 애니메이션 효과를 볼 수 없다.)
    animation: <animation-name> animation: <animation-name> ¦ <animation-duration> ¦
<animation-timing-function> ¦ <animation-delay> ¦
<animation-iteration-count> ¦ <animation-direction>​
  • animation-fill-mode:backwards
    - 대상 태그의 animation 효과를 이미 적용시켜준 상태에서 시작해주는 구문
    - animaiton-delay 구문과 0% 함께 보통 많이 사용한다.
  • animation-fill-mode:forwards
    - animation 구문에 작성해준 css속성들은 일시적으로 적용이 되었다가 태그 본연의 모습으로 돌아오는데 forwards라는 css속성을 사용해주면 animation 구문이 적용이 된 상태로 끝까지 유지가 된다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>animation #4</title>
    <style>
        *{margin:0;padding:0}
        
        #a{width:300px;height:300px;
            background-color:blue;
            animation:abc 1s;
            /*margin:300px auto;*/
            margin-top:200px;margin-left:200px}
        
        @keyframes abc{
            0%{transform:translateX(-600px);opacity:0}
        }
    </style>
</head>
<body>
    <div id="a"></div>
</body>
</html>​

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>animation #5</title>
    <style>
        *{margin:0;padding:0;}
        h1, h2, h3{text-align:center;
                    height:100px;
                    animation:abc 1s;
                    animation-fill-mode:backwards;}
        
        @keyframes abc{
            0%{transform:translateY(100px);opacity:0;}
        }
        
        h2{animation-delay:1s;}
        
        h3{animation-delay:2s;}
        
        h4{text-align:center;height:100px;
            animation:bbb 2s;
            animation-fill-mode:forwards}
        
        @keyframes bbb{
            100%{color:orange;transform:translateY(300px)}
        }
    </style>
</head>
<body>
    <h1>안녕하세요 h1태그 입니다</h1>
    <h2>안녕하세요 h2태그 입니다</h2>
    <h3>안녕하세요 h3태그 입니다</h3>
    
    <h4>안녕하세요 h4태그 입니다</h4>
    
</body>
</html>​
728x90
저작자표시

'Front-End (웹) > CSS' 카테고리의 다른 글

텍스트 관련 스타일  (0) 2022.01.04
글꼴 관련 스타일  (0) 2022.01.04
transform 속성  (0) 2021.09.07
드롭다운 메뉴  (1) 2021.09.01
z-index 속성  (0) 2021.09.01
'Front-End (웹)/CSS' Related Articles more
Comments