@charset "utf-8";

/* Robot PJ - 애니메이션 CSS */

/* 
키프레임 : 애니메이션 장면 연출 

[ 키프레임이란? ]
- 애니메이션 변화를 지정하는 코딩영역

[ 2장면 코딩법 ]

@keyframes 키프레임명{
    from{시작CSS}
    to{마지막CSS}
}

[ 여러장면 코딩법 ]
- 퍼센트로 장면을 분할하여 사용함
(무한대의 장면 연출가능)

@keyframes 키프레임명{
    0%{CSS설정}
    10%{CSS설정}
    20%{CSS설정}
    ...
    90%{CSS설정}
    100%{CSS설정}

    [ 설정된 키프레임 호출하는 방법 ]

animation: 이시이지반방마
(이름 시간 이징 지연 반복 방향 마지막상태)

}

*/

/* 1-1.로봇 등장 키프레임 */
@keyframes showRobot {
    /*
    초기값과 같다면 form은 생략 가능함
    from{
        transform:
        translate(20%, -20%)
        scale(0);
    }
    */
    to{
        transform:
        translate(0, 0)
        scale(.6)
        /* rotate(720deg); */
    }
}

/* 로봇 몸 키프레임 추가 */
@keyframes showRobot2 {
    0%{
        transform: rotate(0);
    }
    50%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}

/* 
    [ 애니메이션 기본 특성 ]
    1. 기본적으로 1회만 실행
    2. 애니메이션 후 처음 설정된 값으로 돌아감
    3. 반복할 경우, 시작->끝 순으로 반복함

    [ 기본특성 변경하기 ]
    1. 반복실행하고싶으면 '반복여부(animation-iteration-count)' 속성값으로 반복횟수를 쓰거나
    계속해서 반복실행 하고 싶으면 infinite 속성값 설정하면 됨

    2. 마지막 애니메이션 설정값으로 끝나고 싶으면 '마지막상태(animation-fill-mode)' 속성값을 forwards로 쓴다

    3. 시작->끝, 끝->시작 반복 애니메이션을 역순으로도 설정하고 싶으면 '방향(animation-direction)' 속성값을 alternate로 쓴다

*/

/* 1-2.키프레임 호출설정 - 대상 */
.robx{
    /* 초기상태 지정하기 */
    transform:
        translate(20%, 10%)
        scale(0);
        /* rotate(0); */

    /* 트랜스폼 기준값 변경 */
    transform-origin: top;

    /* 애니메이션 : 이시지이반방마 */
    animation:
    showRobot 4s ease-out 1s forwards;
    /* showRobot 3s ease-in-out 1s 3 infinite alternate forwards; */
    
}
/* 로봇 몸 추가 회전 애니메이션 호출 */
.robx>div{
    /* 애니메이션 : 이시이지반방마 */
    animation: showRobot2 4s ease-in-out 1s;
}


/* 2-1.왼팔 허리에 올리기 키프레임 */
@keyframes leftArm1 {/* 팔 상단 */
    to{
        transform: rotate(52deg);
    }
}
@keyframes leftArm2 {/* 팔 하단 */
    to{
        transform: rotate(-98deg);
    }
}
@keyframes leftArm3 {/* 왼손 */
    to{
        transform: rotate(77deg);
    }
}
/* 2-2.왼팔 애니 호출하기 */
.a1 {
    /* 애니메이션 : 이시이지반방마 */
    animation: leftArm1 .5s ease-in-out 5s forwards;
}

.a1 span {
    /* 애니메이션 : 이시이지반방마 */
    animation: leftArm2 .5s ease-in-out 5s forwards;
}

.a1 span::after {
    /* 애니메이션 : 이시이지반방마 */
    animation: leftArm3 .5s ease-in-out 5s forwards;
}

/* 3-1.오른속 키프레임 */
@keyframes rightArm1 {/* 팔 상단 (한번 올리기) */
    to{
        transform: rotate(-122deg);
    }
}
@keyframes rightArm1-2 {/* 팔 상단 (계속 흔들기) */
    from{
        transform: translate(-122deg);
    }
    to{
        transform: rotate(-142deg);
    }
}
@keyframes rightArm2 {/* 팔 하단 (계속 흔들기) */
    from{
        transform: rotate(10deg);
    }
    to{
        transform: rotate(-10deg);
    }
}
@keyframes rightArm3 {/* 오른손 (계속 흔들기) */
    from{
        transform:
        rotate(20deg)
        rotateY(180deg);
        right: -22px;
    }
    to{
        transform:
        rotate(-20deg)
        rotateY(180deg);
        right: -22px;
    }
}

/* 3-2.오른팔 애니 호출 */
/* 오른팔 상단 */
.a2{
    /* 애니메이션 : 이시이지반방마 */
    animation:
    rightArm1 .5s ease-in-out 6s forwards,
    rightArm1-2 .3s linear 6.5s infinite alternate;
}
/* 오른팔 하단 */
.a2 span{
    animation: rightArm2 .3s ease-in-out 6.5s infinite alternate;
}

/* 오른손 */
.a2 span::after{
    animation: rightArm3 .3s linear 6.5s infinite alternate;
}


/* 4-1. 로고 중앙에서 왼쪽위로 이동하기 키프레임 */
@keyframes logoAni {
    80%{
        /* 위치와 크기 변경 */
        top: 50px;
        left: 50px;
        transform: scale(1);
    }
    100%{
        /* 위치와 크기 변경 */
        top: 50px;
        left: 50px;
        transform: scale(1) rotate(15deg);
    }
}
/* 키프레임 끝 */

/* 오뚜기 회전 애니 키프레임 추가 */
@keyframes logoAni2 {
    from{
        transform: rotate(15deg);
    }
    to{
        transform: rotate(-15deg);
    }
}
/* 키프레임 끝 */

/* 4-2.로고 애니 호출 */
.logo{
    /* 애니메이션: 이시이지반방마 */
    animation:
    logoAni 2s ease-in-out 1s forwards,
    logoAni2 .5s ease-in-out 3s infinite alternate;
}
