[14] animation CSS

개발일지/HTML&CSS

[14] animation CSS

꾸주니=^= 2024. 11. 22. 20:42

animation CSS

- 애니메이션을 사용하면 요소를 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있다.
- css 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇가지 키프레임 keyframes을 지정해야 한다.
- 키프레임(keyframe)은 특정 시간에 요소의 스타일을 유지한다.

실습

<style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: animationName 5s linear 2s infinite alternate;
        }

        @keyframes animationName {
            0% {
                background: lightblue;
                left: 0px;
                top: 0px;
            }
            25% {
                background: lightcoral;
                left: 150px;
                top: 0px;
            }
            50% {
                background-color: lightcyan;
                left: 150px;
                top: 150px;
            }
            75%{
                background-color: lightgray;
                left: 0px;
                top: 150px;
            }
            100%{
                background-color:lightgreen;
                left: 0px;
                top: 0px;
            }
        }
    </style>
    <body>
    	<div></div>
    </body>

저작자표시