센터에서 시작하는 펄스

Question

모서리에서 시작하는 맥동 애니메이션을 만들었습니다. 원의 중심에서부터 시작하고 싶습니다. 아래의 원점은 동일합니다. 원 중심에서 애니메이션을 시작하려면 어떻게해야합니까? http://codepen.io/SurajVerma/pen/igxyr

감사 : 여기

.animation-container{width: auto; height: 500px;} 
.aniCircle{width: 100px;height: 100px;border-radius: 50%;background: orange;margin: 0 auto;position: relative;top: 40%;animation: firstone 2s linear infinite alternate;-webkit-animation: firstone 2s linear infinite alternate;} 
@-webkit-keyframes firstone{ 
    0% {width:0px; height: 0px; background: violet;} 
    10%{width: 10px; height: 10px;background: indigo;} 
    20%{width: 20px; height: 20px; background: blue;} 
    30%{width: 30px; height: 30px; background: green;} 
    40%{width: 40px; height: 40px; background: yellow;} 
    50%{width: 50px; height: 50px; background: orange;} 
    60%{width: 60px; height: 60px; background: orange;} 
    70%{width: 70px; height: 70px; background: red;} 
    80%{width: 80px; height: 80px; background: orange;} 
    90%{width: 90px; height: 90px; background: yellow;} 
    100%{width: 100px; height: 100px; background: green;} 
} 

및

링크에 codepen입니다.

Answer 1

SOLUTION

CSS의 변경 사항 :

position: absolute; 
top: 50%; left: 50%; 
transform: translate(-50%, -50%); 

발췌문 :

.animation-container{width: auto; height: 500px;} 
 
.aniCircle{width: 100px;height: 100px;border-radius: 50%;background: orange;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);animation: firstone 2s linear infinite alternate;-webkit-animation: firstone 2s linear infinite alternate;} 
 
@-webkit-keyframes firstone{ 
 
    0% {width:0px; height: 0px; background: violet;} 
 
    10%{width: 10px; height: 10px;background: indigo;} 
 
    20%{width: 20px; height: 20px; background: blue;} 
 
    30%{width: 30px; height: 30px; background: green;} 
 
    40%{width: 40px; height: 40px; background: yellow;} 
 
    50%{width: 50px; height: 50px; background: orange;} 
 
    60%{width: 60px; height: 60px; background: orange;} 
 
    70%{width: 70px; height: 70px; background: red;} 
 
    80%{width: 80px; height: 80px; background: orange;} 
 
    90%{width: 90px; height: 90px; background: yellow;} 
 
    100%{width: 100px; height: 100px; background: green;} 
 
} 
 
@-moz-keyframes firstone{ 
 
    0% {width:0px; height: 0px; background: violet;} 
 
    10%{width: 10px; height: 10px;background: indigo;} 
 
    20%{width: 20px; height: 20px; background: blue;} 
 
    30%{width: 30px; height: 30px; background: green;} 
 
    40%{width: 40px; height: 40px; background: yellow;} 
 
    50%{width: 50px; height: 50px; background: orange;} 
 
    60%{width: 60px; height: 60px; background: orange;} 
 
    70%{width: 70px; height: 70px; background: red;} 
 
    80%{width: 80px; height: 80px; background: orange;} 
 
    90%{width: 90px; height: 90px; background: yellow;} 
 
    100%{width: 100px; height: 100px; background: green;} 
 
}

<div class="content animation-container"> 
 
    <div class="aniCircle"></div> 
 
</div>