Beny's Study

20. 애니메이션 본문

CSS_VSC

20. 애니메이션

76beny 2022. 6. 22. 22:00 
<!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>애니메이션적용하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Chango&display=swap" rel="stylesheet">
    <style>
        @keyframes ani {
            from {
                background-color: black;
                font-size: 20px;
                transform: rotate(30deg);
            }
            to {
                background-color: coral;
                border: 3px aquamarine dotted;
                font-size: 10px;
                border-radius: 50px;
                transform: rotate(360deg);
            }
        }
        
        @keyframes ani2 {
            0% {
                background-color: darkgreen;
                font-size: 15px;
                border-radius: 100px;
                transform: rotate(360deg);
            }
            20% {
                background-color: crimson;
                width: 300px;
                height: 300px;
            }
            40% {
                transform: translate(100px, 200px);
                background-color: lightsalmon;
            }
            60% {
                width: 10px;
                height: 10px;
                transform: scale(1.5);
            }
            100% {
                background-color: magenta;
                width: 200px;
                height: 200px;
                transform: skew(20deg, 20deg);
            }
        }
        
        .anitest:hover {
            width: 200px;
            animation-name: ani;
            animation-duration: 4s;
            animation-direction: alternate;
            animation-iteration-count: infinite;
        }
        
        .anitest2:hover {
            animation: ani2 5s infinite alternate;
        }
    </style>
</head>

<body>
    <div class="anitest">기본 애니메이션적용하기</div>
    <div class="anitest2">이것도 애니메이션적용</div>

    <header>
        <nav>
            <ul>
                <li>main</li>
                <li>board</li>
                <li>gallary</li>
                <li>warehouse</li>
            </ul>
        </nav>
    </header>
    <style>
        header>nav>ul>li {
            display: inline-block;
            font-size: 30px;
            font-weight: bold;
            font-family: "Chango";
            margin-right: 50px;
            color: lightgreen;
            cursor: pointer;
        }
        
        header>nav li:hover {
            animation: menumove 0.5s infinite alternate;
        }
        
        @keyframes menumove {
            from {
                transform: translateX(3px);
                color: lime;
                text-decoration: underline;
                font-size: 40px;
            }
            to {
                transform: translateX(-3px);
                color: lightgreen;
                text-decoration: underline;
                font-size: 40px;
            }
        }
    </style>
</body>

</html>
애니메이션적용하기
기본 애니메이션적용하기
이것도 애니메이션적용

'CSS_VSC' 카테고리의 다른 글

26. 페이지 상세 코드  (0) 2022.06.22
19. 트랜지션_지연  (0) 2022.06.22
18. 이미지 움직임2  (0) 2022.06.22
17. 이미지 움직임  (0) 2022.06.22
16. 레이아웃(Table)  (0) 2022.06.22
'CSS_VSC' Related Articles more