[E-HTML&CSS] 애니메이션 예시

ani_transition

css 코드

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
  margin: 20px auto;

  /* TODO: 애니메이션 추가 */
  /* transition-property: 애니메이션 효과를 부여할 속성 나열 */
  /* 사용법 : transition-property: 속성1, 속성2 ... */
  transition-property: width, height;
  /* 사용법 : transition-duration: 지속시간1, 지속시간2 ... */
  /* 지속시간 : 애니메이션 효과를 지속할 시간 
    s(second) : 초, m(minutes) : 분, h(hour) : 시간
  */
  transition-duration: 2s, 1s;
}

/* 박스에 마우스가 위로 올라가면 :hover */
.box:hover {
  width: 200px;
  height: 120px;
}

 

css 코드

.box {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  border: 1px solid black;
  background-color: orange;
  /* TODO: 애니메이션 부여(축약식) */
  /* all : 모든 속성 */
  /* ease-in : 시작(천천히진행) - 끝(빨리진행) : 속도차이가 있는 효과 부여 */
  /* 사용법 : transition: 속성 속도차이효과 지속시간; */
  transition: all ease-in 2s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

 

css 코드

div {
  width: 100px;
  height: 100px;
  margin: 30px;
  float: left;
}

.bg-tr {
  background-color: skyblue;
  /* TODO: 애니메이션 부여 */
  /* ease : 시작(천천히효과부여) 중간(빨리효과부여) 끝(천천히효과부여) */
  /* 사용법: transition: 속성 효과 지속시간(s,ms);s */
  transition: all ease 1s;
}

/* 1st 박스에 마우스 위로 */
.bg-tr:hover {
  background-color: blue;
}

.border-tr {
  background-color: orange;
  /* linear : 등속, 시작 - 중간 - 끝 모두 속도가 같음 */
  transition: all linear 1s;
}

/* 2st 박스에 마우스 위로 */
.border-tr:hover {
  background-color: red;
  border-radius: 50%;
}

---

ani_rotate

css 코드

/* 전체 div */
#container {
  width: 200px;
  margin: 30px auto;
}

/* 애니메이션 효과 부여 대상 */
img {
  border: 1px solid #cccccc;
  border-radius: 50%;
  /* TODO: 애니메이션 효과 부여(함수 사용) */
  animation: rotateBear 2.5s infinite;
}

/* css 함수 */
/* @keyframes 함수명 */
/* from {} : 최초 실행 위치 */
/* 50% {} : 중간 실행 위치 */
/* to {} : 마지막 실행 위치 */
@keyframes rotateBear {
  /* TODO: 음수 : 왼쪽으로 회전, 양수: 오른쪽으로 회전 */
  /* TODO: rotateX(도(0~360)) : x축을 기준으로 회전 */
  /* TODO: rotateY(도(0~360)) : y축을 기준으로 회전 */
  /* TODO: perspective(픽셀) : 원근감 */
  /* 사용법 : transform: perspective(위치) rotateY(0도~360도); */
  from {
    transform: perspective(200px) rotateY(0deg);
  }
  50% {
    transform: perspective(200px) rotateY(-180deg);
  }
  to {
    transform: perspective(200px) rotateY(-360deg);
  }
}

---

ani_translate

css 코드

/* 전체 div(부모 div) */
#container {
  width: 800px;
  height: 200px;
  margin: 20px auto;
}

/* 1st, 2nd, 3rd 박스들(자식 div) */
.origin {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  margin: 40px;
}

/* 손자 div들 */
.origin > div {
  width: 100px;
  height: 100px;
  background-color: orange;
}

/* TODO: 애니메이션 부여 */
/* 1st 손자 div : #movex 에 마우스가 올라 갔을 때*/
#movex:hover {
  /* 이동 효과 부여 */
  /* 사용법 : transform: translateX(x좌표거리); */
  transform: translateX(50px);
}

/* 2nd 손자 div : #movey 에 마우스가 올라 갔을 때*/
#movey:hover {
  /* 이동 효과 부여 */
  /* 사용법 : transform: translateY(y좌표거리); */
  transform: translateY(50px);
}

/* 3rd 손자 div : #movexy 에 마우스가 올라 갔을 때*/
#movexy:hover {
  /* 이동 효과 부여 */
  /* 사용법 : transform: translate(x좌표거리, y좌표거리); */
  transform: translate(50px, 50px);
}