[css]animation @keyframes, name, duration,delay,timing-function

rondido·2022년 8월 23일
0

Css

목록 보기
8/13

animination


animation과 transition의 차이점

  • transition은 유저의 액션이나 어떤 행위로 인해 변화하지만 애니메이션은 유저의 액션이 없어도 요소가 스타일 자동으로 변경

@keyframes

  • 위 구문 통해 개발자가 애니메이션 중간중간에 키프레임들을 설정하여 중간 절차를 제어

<!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">
    <link rel="stylesheet" href="styles/main.css">
    <title>CSS</title>
</head>
<body>
    <div class="box">
        a
    </div>
</body>
</html>

.box{
    width:100px;
    height: 100px;
    border: 10px solid seagreen;
    background-color: rgb(204,253,225);
    border-radius: 30px;
    animation: my-first-animation 5s infinite;
}

@keyframes my-first-animation{
    0%{
        font-size: 20px;
    }
    50%{
        width: 300px;
        font-size: 50px;
    }
    100%{
        width: 100px;
        font-size: 10px;
    }
}

keyframes을 사용 시 에는 2개 이상의 조건이 있어야 함.


animation-name

  • keyframes의 이름이 작성 됨.
  • 알파벳 대소문자를 가리며 a to z까지 숫자는 0 to 9까지 underscores(-) or dashes(_) 사용 가능

animation-duration

  • transition-duration과 동일하여 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정
  • animation-delay는 음수 값을 허용하지만 duration은 허용 하지 않는다.

animation-delay

  • 시작하고 나서 한 사이클을 재생하는데 시간을 지연 할 수 있음

<!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">
    <link rel="stylesheet" href="styles/main.css">
    <title>CSS</title>
</head>
<body>
    <div class="box1">
        a
    </div>
    <div class="box2">
        a
    </div>
    <div class="box3">
        a
    </div>
</body>
</html>

div {
    width:100px;
    height: 100px;
    border: 10px solid silver;
    border-radius: 30px;
    animation: my-first-animation 1s infinite;

}
.box1{
    background-color: rgb(204,253,225);
    /* 초기 값 */
    animation-delay: 0;
}
.box2{
    background-color: rgb(255,221,198);
    animation-delay: 0.3s;
   
}
.box3{
    background-color: rgb(186,239,250);

    animation-delay: 0.6s;

   
}
@keyframes my-first-animation{
    0%{
        font-size: 20px;
    }
    50%{
        width: 300px;
        font-size: 50px;
    }
    100%{
        width: 100px;
        font-size: 10px;
    }
}
profile
개발 옆차기

0개의 댓글