Animation 애니메이션으로 빌딩 세우기

Dana·2021년 11월 13일

HTML/CSS

목록 보기

12/14

Keyframe 속성
애니메이션이 만들어지는 부분이다!
from, to나
0% ~ 100%로 애니메이션 스타일을 설정하면 된다.
0%과 100% 사이에는 여러 개의 중간 프레임을 설정할 수 있다.

애니메이션으로 상자 돌아오게 만들기

<!DOCTYPE html>
<html lang="ko">
<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>reverse</title>
    <style>
        /* 키프레임 이름 == 애니메이션 이름 */
        @keyframes 돌아와돌아와돌아와 {
            0% {
                transform: translate(0, 0);
            }
            33.3% {
                transform: translate(500px, 0);
            }
/* x축 500px 이동 */
            66.6% {
                transform: translate(500px, 500px);
            }
/* x축은 500px 그대로 y축은 500px 이동 */
            100% {
                transform: translate(0, 500px);
            }
        }
/* x축은 0으로 이동 y축은 500px 그대로! */
        div {
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            animation: 돌아와돌아와돌아와 6s alternate infinite;
/*애니메이션을 무한 반복하는 경우 */        
        }
    </style>
</head>
<body>
    <div>hello</div>
</body>
</html>

스타벅스 빌딩 세우기

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 키프레임 이름 == 애니메이션 이름 */
  @keyframes star {
    from{
      background-position: 0px, 0px;
    }
    to {
      background-position: -3730px, 0;
    }
  }
  .building1{
    width: 110px;
    height: 180px;
    background: url('building/building1.png') no-repeat;
    animation: star 5s steps(33);
/*step이 없으면 뚝뚝 끊어서 자연스럽지 않음.*/
    /* animation-fill-mode: forwards; 없으면 처음인 백지로 돌아감  */
    animation-fill-mode: forwards;
  }
  </style>
</head>
<body>
  <div class="building1"></div>
</body>
</html>

Dana

웹개발

이전 포스트

CSS transition, transform

다음 포스트

미디어쿼리

2개의 댓글

HyunHo Lee

2021년 11월 14일

빌딩세우기 애니메이션 처음봤을때 신기하더라구요ㅎㅎ

답글 달기

스톤보트

2021년 11월 16일

저도 한번 해봐야겠습니다

답글 달기