html&css

원이 확대되는 애니메이션

다양성 2022. 11. 25. 20:28

https://codepen.io/ziziziczic/pen/oNydqNe

 

wave animation

...

codepen.io

스타일

 <style>
        @-webkit-keyframes wave {
            from {
                -webkit-transform:  scale(1,1);
                        transform:  scale(1,1);
                        opacity: 1;
            }
            to {
                -webkit-transform:  scale(2,2);
                        transform:  scale(2,2);
                        opacity: 0;
            }
        }

        @keyframes wave {
            from {
                -webkit-transform:  scale(1,1);
                        transform:  scale(1,1);
                        opacity: 1;
            }
            to {
                -webkit-transform:  scale(2,2);
                        transform:  scale(2,2);
                        opacity: 0;
            }
        }

        .wave{
            position:absolute;
            left:50px;
            top:50px;
            width:21px;
            height:21px;
            border: 5px solid red;
            border-radius: 50%;
            animation: wave 1000ms infinite linear;
        }
        .circle{
            position:absolute;
            left:56px;
            top:56px;
            width:19px;
            height:19px;
            background: red;
            border-radius: 50%;
           
        }
    </style>

마크업

    <div class="wave"></div>
    <div class="circle"></div>

페이지 로딩 시, 사용자들의 이탈을 막기 위해 사용할 animation 을 만들어보았다.