푸르미오미
20
2019-07-08 18:18:42
2
155

선배님들 css animation 질문하나만해도될까요


선배님들 애니메이션으로 원이 크게퍼져나가는 효과 만들고싶은데

html은 일단

<div class="shin_re">

                    <span class="shin_1"></span>

                    <span class="shin_2"></span>

                    <span class="shin_3"></span>

                    <span class="shin_4"></span>

                    <span class="shin_5"></span>

                </div>


이렇게 짯고여


cs를

.shin_1::before {

    content: '';

    top: 10px;

    left: 10px;

    border: 10px solid rgba(255, 0, 0, 0.2);

    margin: 0 auto;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    animation-name: shiny2;

    animation-duration: 5s;

    animation-timing-function: ease-in-out;

    animation-iteration-count: infinite;

    animation-direction: normal;

    animation-fill-mode: none;

    animation-play-state: running;

    transition-duration: 5s;


}


.shin_1::after {

    content: '';

    position: absolute;

    border: 10px solid rgba(0, 0, 255, 0.3);

    width: 70px;

    height: 70px;

    border-radius: 50%;

    top: 0;

    left: 0;

    animation-name: shiny3;

    animation-duration: 5s;

    animation-timing-function:ease-out;

    animation-iteration-count: infinite;

    animation-direction: normal;

    animation-fill-mode:both;

    animation-play-state: running;

    transition-duration: 5s;


}


@keyframes shiny2 {

    0% {

        opacity: 0;

    }

    20%{

        opacity: 0.5;

        

    }


    100% {

        opacity: 0;

        width: 120px;

        height: 120px;

    }

}

@keyframes shiny3 {

    0% {

        opacity: 0;

    }

    20%{

        opacity: 0.5;

        

    }


    100% {

        opacity: 0;

        width: 120px;

        height: 120px;

    }

}


이렇게 줬습니당 그래서 일단은 동그라미가 퍼져나가면서 사라지긴하는데

이게 x0,y0에서 시작해서 커지니까 커지긴하는데 이게 우측하단으로 늘어나면서 커지는데;; 가운데에서 균일하게 커지게 하려면 어떻게 해야하나요?


0
0
  • 답변 2

  • WebStorm
    118
    2019-07-09 12:54:24

    top, left 가 좌 상단에 붙어있으니 당연히 그렇게 나올거구요.


    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);


    로 하면 센터부터 시작될거에요.



    그리고 width, height로 크기가 커지는 애니메이션은 60프레임이 안나와 중간에 프레임이 유실되어 끊겨 보이는데요. 

    scale() 을 이용하면 GPU를 사용한 애니메이션으로 부드러운 애니메이션이 될겁니다.

    0
  • 푸르미오미
    20
    2019-07-24 10:39:20

    정말 감사합니다..!!!!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.