gwooden_코린이

html + CSS 애니메이션 본문

프론트엔드/html

html + CSS 애니메이션

gwooden22 2022. 12. 19. 15:11
728x90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style4.css">
</head>
<body>
  <div>
    
  </div>
</body>
</html>
div {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative;

  animation-name: ani;
  /*animation-duration: 3s;  몇 초 동안 진행할지 */

  /* animation-timing-function: ease-in; */

 /*  animation-delay: 3s; 이미지 시작 딜레이 */

  /* animation-iteration-count: 2; 반복 횟수 (무한반복은 infinite) */

  /*animation-direction: alternate;  역방향 재생 (최소 2번이상 반복 재생 필요) */
  /* reverse는 시작자체를 역방향으로 시작 */


  /* animation:  ani 3s 1s ease-in infinite alternate;  <--- 한 줄에 코드 입력 가능*/
  animation:  ani 3s 1s ease-in alternate;

  animation-fill-mode: both;

}

div:hover { /* 커서를 이용한 효과 */

  animation-play-state: paused;

}

/* @keyframes ani {
  from {
    left: 0;
    background-color: blue;
  }
  to {
    left: 200px;
    background-color: red;
  }
} */


/* 위 키프레임 보다 더 세분화해서 할 수 있음 */

@keyframes ani {
  0% {
    left: 0;
    background-color: blue;
  }

  50% {
    left: 200px;
    background-color: red;
  }

  100% {
    left: 400px;
    background-color: red;
  }
}

▶ 사각형 모형 좌우/위 아래로 연속 이동해보기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style5.css">
</head>
<body>
  <div>
    
  </div>
</body>
</html>
div {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative;

  animation: ani;
  animation-duration: 3s;


}




div:hover { /* 커서를 이용한 효과 */

  animation-play-state: paused;
}

@keyframes ani {
  0% {
    left: 0;
    top: 0;
  }

  25% {
    left: 200px;
    top: 0;
    background-color: blueviolet;
  }

  50% {
    left: 200px;
    top: 200px;
    background-color: yellow;
  }

  75% {
    left: 0;
    top: 200px;
    background-color: gray;
  }

  100% {
    left: 0;
    top: 0;
    background-color: red;
  }
}

▶ 마우스 커서 올렸을때 색상이 천천히 바뀌게 하기

div {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative;

  transition: all 2s;
}

div:hover  {
  /* background-color: red; */
  opacity: 0.5;
}
728x90
저작자표시 비영리 변경금지

'프론트엔드 > html' 카테고리의 다른 글

HTML + CSS 가상클래스 ::before와 after  (0) 2022.12.20
html + CSS 가상 클래스  (0) 2022.12.19
html + CSS transform 기능 살펴보기  (0) 2022.12.19
html + CSS 네비바 활용한 간단한 페이지 및 sns 프로필 만들어보기  (0) 2022.12.19
css 포지션 position  (0) 2022.12.16
'프론트엔드/html' Related Articles more
Comments