css 실행문제
본문
안녕하세요
페이지를 제작중인데
스크롤을 좀 많이 내려서 맨마지막에
애니메이션 소스가 나옵니다.
사이트 들어옴과 동시에
하단에서 이미 애니메이션이 진행된 후라
막상 해당 섹션에 가면 애니메이션이 멈춰있는데요
해당 DIV로 갔을때 실행시키는 방법이 있을까 해서
고수님들에게 도움을 요청드려 봅니다!
<div id="section1">
내용
</div>
<div id="section2">
내용
</div>
<div id="section3">
내용
</div>
<style>
.wrapper {
margin: 50px;
width: 300px;
height: 300px;
overflow: hidden;
position:relative
}
.right {
border: #3f85a3 solid 15px;
height: 125px;
width: 125px;
border-radius:120px;
border-top-color: transparent;
border-left-color: transparent;
position: absolute;
transform: rotate(-45deg);
animation: rota2 1000ms linear;
-moz-animation: rota2 1000ms linear;
-o-animation: rota2 1000ms linear;
-webkit-animation: rota2 1000ms linear;
}
@keyframes rota2 {
from{ transform:rotate(-225deg);}
to { transform: rotate(-45deg);}
}
@-o-keyframes rota2 {
from{ transform:rotate(-225deg);}
to { transform: rotate(-45deg);}
}
@-moz-keyframes rota2 {
from{ transform:rotate(-225deg);}
to { transform: rotate(-45deg);}
}
@-webkit-keyframes rota2 {
from{ transform:rotate(-225deg);}
to { transform: rotate(-45deg);}
}
.left {
border: #3f85a3 solid 15px;
height: 125px;
width: 125px;
border-radius:120px;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
transform: rotate(315deg);
animation: rota 2000ms linear;
-o-animation: rota 2000ms linear;
-moz-animation: rota 2000ms linear;
-webkit-animation: rota 2000ms linear;
}
@keyframes rota {
from {transform: rotate(-45deg);}
to { transform: rotate(315deg);}
}
@-o-keyframes rota {
from {transform: rotate(-45deg);}
to { transform: rotate(315deg);}
}
@moz-keyframes rota {
from {transform: rotate(-45deg);}
to { transform: rotate(315deg);}
}
@-webkit-keyframes rota {
from {transform: rotate(-45deg);}
to { transform: rotate(315deg);}
}
.middle {
color: #0987bc;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 130px;
height: 130px;
left: 15px;
top: 15px;
border-radius: 150px;
position: relative;
z-index: 4;
}
.popover {
background: white;
width: 80px;
height: 162px;
position:absolute;
top: -3px;
left: -3px;
opacity:0;
z-index:2;
animation: popover 1000ms linear;
-moz-animation: popover 1000ms linear;
-o-animation: popover 1000ms linear;
-webkit-animation: popover 1000ms linear;
}
@keyframes popover {
0% {opacity: 1;}
99%{opacity:1;}
100% {opacity:0;}
}
@-o-keyframes popover {
0% {opacity: 1;}
99%{opacity:1;}
100% {opacity:0;}
}
@-moz-keyframes popover {
0% {opacity: 1;}
99%{opacity:1;}
100% {opacity:0;}
}
@-webkit-keyframes popover {
0% {opacity: 1;}
99%{opacity:1;}
100% {opacity:0;}
}
</style>
<div id="section4">
<div class="progressDiv">
<div class="statChartHolder">
<div class="progress-pie-chart" data-percent="67"><!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div><!--End Chart -->
</div>
<div class="statRightHolder">
<ul>
<li> <h3 class="blue">39.4k</h3> <span>Interactions</span></li>
<li> <h3 class="purple">1.8k</h3> <span>Posts</span></li>
</ul>
<ul class="statsLeft">
<li><h3 class="yellow">22%</h3> <span>Comments</span></li>
<li><h3 class="red">37%</h3> <span>Cheers</span></li>
</ul>
<ul class="statsRight">
<li><h3>18%</h3> <span>Tasks</span></li>
<li><h3>23%</h3> <span>Goals</span></li>
</ul>
</div>
</div>
</div>
