원이 확대되는 애니메이션

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

wave animation

---

스타일

 <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 을 만들어보았다.