복합 애니메이션 @keyframes

복합애니메이션 : 여러번에 걸쳐서 동작, 자동애니메이션
적용법	@keyframes moveBox (함수명)
예시	@keyframes moveBox {   50% { transform:translateX(500px); } }
이름지정	함수명은 카멜표기법 = 동사+명사로 표현 moveBox (대문자를 두번째 명사부터) (중복불가) ex. moveBox, changeColor, fadeCover, moveBox02
%	애니메이션시간에 대한 백분율, 애니메이션시간이 1초인 경우 50%는 0.5초임  0%, 100%는 적지않을경우 최초상태 (0%로 적을시 최초위치로 적용되므로 생략한다)
속성정의	animation: name duration timing-function delay iteration-count direction fill-mode; animation: 키프레임함수명 시간 [ease] [1s] 반복횟수 진행방향 애니메이션끝에서 멈출때
필수	animation: name duration 필수!
animation-delaty	지연시간 지정 (애니메이션 시작후 지연 시간 뒤에 시작)
animation-direction	애니메이션 종료 후 다시 처음부터 시작할지 역방향일지 지정
animation-iteration-count	애니메이션 반복 횐수 지정 (infinite 무한반복)
animation-fill-mode:forwerds	마지막에서 멈추기 (100%에서 멈추게 할때 사용, 없을경우 처음위치로 되돌아감)
animation-play-state	애니메이션 멈추고 다시 시작하기
animation-play-state:pause	일시정지

 

 

 

 

예시

---

@keyframes moveBox {
    50% {
        transform: translate(550px, 100px);
        background: red;
    }
    100% {
        transform: translate(1100px,0);
    }
}

---

 

 

 

핀볼게임같은 효과 : 걸리는시간 지연시간 가속도 무한반복 꺼꾸로

    animation: moveBox 2s 1s linear infinite reverse;

@keyframes moveBox {
    50% {
        transform: translate(550px, 100px);
        background: red;
    }
    100% {
        transform: translate(1100px,0);
    }
}
.main_section06 .box {
    animation: moveBox 2s 1s linear infinite;
    animation-fill-mode: forwards;
    animation-play-state: running;
}
.main_section06:hover .box  {
    animation-play-state: paused;
}

 

---

 

 

반복하다 마우스 가따대면 멈추기 

.main_section06:hover .box  {

    animation-play-state: paused;

}

 

 

@keyframes moveBox2 {
    40%{    transform: translate(1100px,0);
    }
    50%{    transform: translate(1100px,100px);
    }
    90%{    transform: translate(0,100px);
    }
}

.main_section07 .box {
    animation: moveBox2 2s infinite;
}

 

 

 

---

 

*시계추 효과 만들기

 

 

/* 시계추만들기 */
.main_section08 {
    position: relative;
}
@keyframes rotateClock {
    50% {
        transform: rotateZ(45deg);
    }
}

/* ease-in-out 은 반복애니메이션에 사용 */
.main_section08 .clock {
    position: absolute;
    left: 50%;
    top: 0;
    width: 50px;
    margin-left: -25px;
    border: 1px solid red;
    transform: rotateZ(-45deg);
    transform-origin: center top;
    /* transform-origin: 좌표측 */
    animation: rotateClock 2s infinite ease-in-out;
}

.main_section08 .clock .line {
    width: 5px;
    height: 100px;
    background: #000;
    margin: 0 auto;
}
.main_section08 .clock .circle {
    width: 50px;
    height: 50px;
    background: #000;
    border-radius: 50%;
    margin: 0 auto;
}