본문 바로가기
개발 스터디/css

15. 애니메이션

연우0 2023. 8. 3. 17:09

애니메이션 

- 일반적으로 css애니 > js 기반 애니 렌더링 성능

그러나 경우에 따라 js가 나을수도, jquery 등 애니메이션 기능 > css보다 간편

 

- 비교적 작은 효과, css만으로 충분한 효과 볼수있는 것> css

- 세밀한 제어 > js 사용 ex) 바운스, 중지, 일시중지, 되감기, 감속 과같은 고급효과

 

애니메이션 효과에 소요되는 시간, 수고 등 고려해 js 또는 css 결정

 

animation-name : @keyframes 애니메이션 이름 지정

animation-duration : 소요시간 s/ms로 지정 0s

animation-timing-function : 타이밍함수 ease

animation-delay : 대기시간 0s

animation-iteration-count : 애니메이션 재생 횟수를 지정 1

animation-direction : 애니메이션 종료된 이후 반복될 때 진행하는 방향 지정 normal

animation-fill-mode : 애니메이션 미실행 시 요소의 스타일 지정

animation-play-state : 애니메이션 재생 상태를 지정 running

animation : 모든 애니메이션 프로퍼티 한번에 지정

 

1. @keyframes

@keyframes rule 사용>애니메이션의 흐름 중 여러 시점에서 css 프로퍼티값 지정 가능

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                position: absolute;
                width:100px;
                height: 100px;
                background-color: red;
                animation-name:move;
                animation-duration: 5s;
                animation-iteration-count: infinite;
            }

            @keyframes move {
                from{
                    left:0;
                }

                to{
                    left:300px;
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
   
</html>

from, to 키워드 사용해서 애니메이션 시작과 끝 시점 정의

from : 애니메이션 시작지점 의미 > left프로퍼티 값에 0

to : 애니메이션 끝 시점 의미 >left 프로퍼티 300px

결과 > 정지에서 오른쪽으로 300px 이동하는 애니메이션 실행됨

 

from, to 키워드 대신 % 사용도 가능, 시작과 끝 키프레임 사이에 % 단위로 키프레임 삽입 가능

@keyframes move{
                0% {left:0;}
                50% {left:100px;}
                100%{left:300px;}
            }

2. animation-name

 

animation-name 프로퍼티값으로 지정해서 사용하고자 하는 @keyframes rule을 선택

애니메이션 이름 지정 가능

<!DOCTYPE html>
<html>
    <head>
<style>
    div{
        position: absolute;
        width: 100px;
        height: 100px;
        animation-name:move, fadeOut, changeColor;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }

    @keyframes move {
                from{
                    left:0;
                }

                to{
                    left:300px;
                }
            }
            @keyframes fadeOut {
                from{
                    opacity: 1;
                }
                to{
                    opacity: 0;
                }
            }

            @keyframes changeColor {
                from{
                    background-color: red;
                }
                to{
                    background-color: blue;
                }
            }
</style>

    </head>

    <body>
        <div></div>
    </body>
</html>

3. animation-duration

한 애니메이션에 소요되는 시간

반드시 지정해야

 

4. animation-timing-function

애니메이션 효과를 위한 수치 함수 지정

 

5. animation-delay

요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이 대기 시간

 

6. animation-iteration-count

애니메이션 주기의 재생 횟수 지정, 기본값은 1

 

7. animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향 지정

normal : 기본값으로 from에서 to 방향으로 진행

reverse : to에서 from 반향으로 진행

alternate : 홀수번째는 normal, 짝수번째는 reverse로 진행

alternate-reverse : 홀수번째 reverse, 짝수번째는 normal로 진행

 

<!DOCTYPE html>
<html>
    <head>
<style>
    div{    
        background-color: red;
        width: 100px;
        height: 100px;
        position: relative;
        animation:myAnimation 5s infinite;
        animation-direction: alternate;
    }

    @keyframes myAnimation {
                0%{background: red; left:0px; top:0px;}
                25%{background: yellow; left:200px; top:0px;}
                50%{background: blue; left:200px; top:200px;}
                75%{background: green; left:0px; top:200px;}
                100%{background: red; left:0px; top:0px;}
    }
</style>

    </head>

    <body>
        <div></div>
    </body>
</html>

8. animation-fill-mode

애니메이션 미실행 시(대기 또는 종료) 요소의 스타일 지정

none 대기 - 시작 프레임에 설정한 스타일을 적용하지 않고 대기

         종료 - 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티 값 되돌리고 종료

forwards 대기 - 시작 프레임에 설정한 스타일을 적용하지 않고 대기

               종료 - 종료 프레임에 설정한 스타일 적용하고 종료

backwards 대기 - 시작 프레임에 설정한 스타일을 적용하고 대기

                   종료 - 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티 값 되돌리고 종료

both 대기 - 시작 프레임에 설정한 스타일을 적용하고 대기

        종료 - 종료 프레임에 설정한 스타일 적용하고 종료

 

9. animation-play-state

애니메이션 재생 상태를 지정 기본값은 running

paused 멈춤

 

10. animation

모든 프로퍼티 한번에 지정

animation : name duration timing-function delay iteration-count direction fill-mode play-state

none 0 ease 0 1 normal none running

'개발 스터디 > css' 카테고리의 다른 글

17. 웹디자인 타이포그래피  (0) 2023.08.03
16. 트랜스폼  (0) 2023.08.03
14. 트랜지션  (0) 2023.07.30
13. 그레이디언트  (0) 2023.07.30
12. 그림자  (0) 2023.07.30

'개발 스터디/css' Related Articles

티스토리툴바