[CSS] 10. 애니메이션

in CSS on Css



10. 애니메이션

애니메이션 개요

  • transition 과 비슷하다.
  • A 의 css 를 B의 css로 몇초동안 변경
  • transition 은 user action에 따라 실행 여부 결정
  • 애니메이션을 유저 액션과 상관없이 진행
  • a > b 가 아닌 a > b > c > d 가능


@keyframes

@keyframse slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        marin-left: 0%;
        width: 10%;
    }
}

@keyframse identifier {
    0% { top: 0; left: 0;}
    30% { top: 50px;}
    68%, 72% { left: 50px;}
    100% { top: 100px; left: 100%; }
    // 앞의 %는 시간의 개념
}


<div class="box>
안녕
</div>

.box {
    width: 300px;
    height: 80px;
    background-color: green;
    font-size: 50px;
    color: white;

    animation: my-first-animaiton 5s infinite;

    
}

@keyframes my-first-animaiton {
    from {
        width: 300px;
    }
    to {
        width: 600px;
    }
}

@keyframes my-first-animaiton {
    0% {} // 기본값이므로 안적어도 된다.
    50% {
        width: 600px;
    }
    100% {
        width: 300px;
    }
    // 프레임 많이 만들고 싶으면 그래도 된다.
}
  • transition property 와 비슷한 개념
  • 하나의 속성이 아닌 속성의 묶음


animation-name, animation-duration

  • animation-name : keyframes 지정해주는 것(like property)
  • animation-name : none (default)
  • animation-name : _, - 만 사용 가능, 대소문자 구분, 예약어 사용 금지
  • animation-duration: 애니메이션 한 사이클을 완료하는데 걸리는 시간 (s, ms)
  • 음수 사용 금지


animation-delay, animation-timing-function

<div class="box1">
안녕
</div>
<div class="box2">
안녕
</div>
<div class="box3">
안녕
</div>

.box1 {
    width: 300px;
    height: 80px;
    background-color: green;
    font-size: 50px;
    color: white;

    animation: my-first-animaiton 5s infinite;   
    animation-delay: 0;
}

.box2 {
    width: 300px;
    height: 80px;
    background-color: red;
    font-size: 50px;
    color: white;

    animation: my-first-animaiton 5s infinite; 
    animation-delay: 0.3s;  
}

.box3 {
    width: 300px;
    height: 80px;
    background-color: blue;
    font-size: 50px;
    color: white;

    animation: my-first-animaiton 5s infinite;  
    animation-delay: 0.5s; 
}
@keyframes my-first-animaiton {
    0% {} // 기본값이므로 안적어도 된다.
    50% {
        width: 600px;
    }
    100% {
        width: 300px;
    }
}
  • animation-delay : s, ms 음수 사용 가능
  • 음수일때, -1s 이면 바로 시작되지만 1초 부분부터 시작된다.
  • animation-timing-function : transition 과 동일


animation-iteration-count, animation-direction

<div class="box>
안녕~
</div>

.box {
    width: 100px;
    height: 100px;
    background-color: orage;
    border-radius: 50%; // 원
    animation-name: rotate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        trasform: rotate(360deg);
    }
}
  • animation-iteration-count : 반복 횟수
  • <number>: 기본값 1 (한번만 재생)
  • infinite : 무한 반복
  • animation-direction : keyframes 재생 순서
  • normal : 정방향 (default)
  • reverse : 역방향
  • alternate : 매 사이클마다 각 주기의 방향을 뒤집음. 처음은 정방향
  • alternate-reverse : 매 사이클마다 각 주기의 방향을 뒤집음. 처음은 역방향


animation-play-state

/// ... 위의 코드

.box:hover {
    animation-play-state: paused;
    // 마우스 올리면 정지
}
  • running (default) : 계속 진행
  • paused : 일시 정지


animation-fill-mode

<div class="box>
안녕~
</div>

div {
    width: 100px;
    height: 100px;
    border: 10px solid green;
}

.box {
    background-color: red;
    animation: fill-mode 3s linear 1s;
    animation-fill-mode: forwards; // red로 끝남
    animation-fill-mode: backwards; // black에서 시작
    animation-fill-mode: both; // black에서 시작해서 red 로 끝남


}

@keyframes fill-mode {
    0% {
        backgrouond-color: black;
    }
    50% {
        width: 200px;
    }
    100% {
        background-color: red;
    }
}

1. 기존 스타일
2. keyframes 첫번째 // backwards 여기서 시작됨
3. ing
4. keyfrmaes 마지막 // forwards 여기서 끝남
5. 기존 스타일
  • 애니메이션의 실행 전과 후에 스타일을 적용하는 방법
  • none (default) : 애니메이션 재생 전 keyframes 의 속성들은 적용되지 말고 본인 것만 적용해라
  • forwards : 애니메이션 끝났을 때 마지막 keyframes 속성 유지해라
  • backwards : 애니메이션 시작 전에 keyframes 미리 갖고 적용해놔라
  • both : forwards + backwards


animation (shorthand)

  • 작성하지 않으면 initial 값으로 적용된다.
  • 순서 상관 없다.
  • 시간 2개면 duration > delay
  • 마지막은 keyframes 이름
  • animation: 3s linear 1s infinite alternate slidein;


나의 회고 🤫

애니메이션까지 배우니 동적으로 css를 꾸미는 방법을 모두 알게 되었다.!!
css 로 드라마틱한 효과를 주고 싶을 때 transform, transition, 애니메이션을 조합해서 사용하면 외관상 화려한 웹페이지를 만들 수 있을 것 같다.
다음에 시간이 된다면 이 작업을 많이 녹여낼 수 있는 간단한 토이 프로젝트를 만들어봐야겠다.