[CSS] 애니메이션 (2)

keyframs 함수

/* 전체 div */

#container {

  width: 200px;

  margin: 30px auto;

}

/* 애니메이션 효과 부여 대상 */

img {

  /* 외곽선 */

  border: 1px solid #cccccc;

  /* 둥근 사각형 */

  border-radius: 50%;

  /* TODO 애니메이션 효과 부여(함수 사용) */

  /* TODO : infinite : 무한정 */

  animation: rotateBear 2s infinite;

}

/* css 함수 */

/* @keyframes 함수명 */

/* from {} : 최초 실행위치 */

/* 50% :     중간 실행위치 */

/* to {} : 마지막 실행위치 */

@keyframes rotateBear {

    /* TODO : 음수 : 왼쪽으로 회전, 양수 : 오른쪽으로 회전 */

    /* TODO : rotateY(각도0~360) : Y축으로 기준으로 회전  */

    /* TODO : perspective(픽셀) : 원근감  */

    /* TODO 사용법 : transform: perspective(위치) rotateY(0~360); */

  from {

    transform: perspective(200px) rotateY(0deg);

  }

  50% {

    transform: perspective(200px) rotateY(-180deg);

  }

  to {

    transform: perspective(200px) rotateY(-360deg);

  }

}

[실행결과]

이동 애니메이션

/* 부모 div */

#container {

  width: 800px;

  height: 200px;

  margin: 20px auto;

}

/* 1st 2nd 3rd box : 자식 div */

.origin{

    width: 100px;

    height: 100px;

    border: 1px solid black;

    /* 왼쪽배치 : 가로배치 == display:inline-block; */

    float: left;

    /* 바깥여백 */

    margin: 40px;

}

/* 손자 div들 : 자식 div 아래에 있는 div들 */

.origin > div {

  width: 100px;

  height: 100px;

  background-color: orange;

}

/* TODO : 이동 애니메이션 부여 */

/* 손자div1 : #movex에 마우스에 올라갔을때 */

#movex:hover{

  /* 이동효과 */

  /* 사용법 : transform: translateX(x좌표거리); */

  transform: translateX(50px);

}

/* 2nd 손자 */

#movey:hover{

  transform: translateY(50px);

}

/* 3rd 손자 */

#movexy:hover{

  transform: translate(50px, 50px)

}

[실행결과]