css 실행문제 채택완료
안녕하세요
페이지를 제작중인데
스크롤을 좀 많이 내려서 맨마지막에
애니메이션 소스가 나옵니다.
사이트 들어옴과 동시에
하단에서 이미 애니메이션이 진행된 후라
막상 해당 섹션에 가면 애니메이션이 멈춰있는데요
해당 DIV로 갔을때 실행시키는 방법이 있을까 해서
고수님들에게 도움을 요청드려 봅니다!
내용
내용
내용
.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;} }
-
39.4k
Interactions -
1.8k
Posts
22%
Comments37%
Cheers
18%
Tasks23%
Goals
답변 2개
답변을 작성하려면 로그인이 필요합니다.
로그인