css 애니메이션 질문입니다... 채택완료
달려날아
8년 전
조회 2,649
css 애니메이션 초보입니다.
인터넷상에서 네모를 그리는 css애니메이션을 찾아
응용을 하려 하는데요,
첫번째 네모(draw)를 다 그린 뒤에, 두번째 네모(draw2)를 그리기 시작하고 두번째 네모가 그려지면, 세번째 네모(draw3)를 그리기 시작하는 방법에 대해 문의하고 싶습니다.
animation-delay: 10s;
이런 걸 찾아 draw2 스타일에 넣어봤는데 잘못 넣었는지 적용이 되지 않았습니다.
도움 부탁드릴게요 !!
</p><p>
</p><p><style> </p><p>.qmanse {</p><p>width:200px;</p><p>height:200px;</p><p> background: none;</p><p> border: 0;</p><p> box-sizing: border-box;</p><p> box-shadow: inset 0 0 0 5px #fff;</p><p> color: #fff;</p><p> font-size: inherit;</p><p> font-weight: 700;</p><p> text-align: center;</p><p> text-transform: capitalize;</p><p> vertical-align: middle;</p><p> animation-delay:10s;</p><p>}</p><p>.draw {</p><p> overflow: hidden;</p><p> position: relative;</p><p>}</p><p>.draw::before, .draw::after {</p><p> content: '';</p><p> box-sizing: border-box;</p><p> position: absolute;</p><p> border: 5px solid transparent;</p><p> width: 0;</p><p> height: 0;</p><p>}</p><p>.draw::before {</p><p> top: 0;</p><p> left: 0;</p><p> border-top-color: #000;</p><p> border-right-color: #000;</p><p> animation: border 10s ;</p><p>}</p><p>.draw::after {</p><p> bottom: 0;</p><p> right: 0;</p><p> animation: border 10s 5s , borderColor 10s 5s ;</p><p>}</p><p>
</p><p>@keyframes border {</p><p> 0% {</p><p> width: 0;</p><p> height: 0;</p><p> }</p><p> 25% {</p><p> width: 100%;</p><p> height: 0;</p><p> }</p><p> 50% {</p><p> width: 100%;</p><p> height: 100%;</p><p> }</p><p> 100% {</p><p> width: 100%;</p><p> height: 100%;</p><p> }</p><p>}</p><p>@keyframes borderColor {</p><p> 0% {</p><p> border-bottom-color: #2d2d2d;</p><p> border-left-color: #2d2d2d;</p><p> }</p><p> 50% {</p><p> }</p><p> 51% {</p><p> border-bottom-color: transparent;</p><p> border-left-color: transparent;</p><p> }</p><p> 100% {</p><p> border-bottom-color: transparent;</p><p> border-left-color: transparent;</p><p> }</p><p>}</p><p>
</p><p>
</p><p>
</p><p>.draw2 {</p><p> overflow: hidden;</p><p> position: relative;</p><p>}</p><p>.draw2::before, .draw2::after {</p><p> content: '';</p><p> box-sizing: border-box;</p><p> position: absolute;</p><p> border: 5px solid transparent;</p><p> width: 0;</p><p> height: 0;</p><p>}</p><p>.draw2::before {</p><p> top: 0;</p><p> left: 0;</p><p> border-top-color: #000;</p><p> border-right-color: #000;</p><p> animation: border 10s ;</p><p>}</p><p>.draw2::after {</p><p> bottom: 0;</p><p> right: 0;</p><p> animation: border2 10s 5s , borderColor2 10s 5s ;</p><p>}</p><p>
</p><p>@keyframes border2 {</p><p> 0% {</p><p> width: 0;</p><p> height: 0;</p><p> }</p><p> 25% {</p><p> width: 100%;</p><p> height: 0;</p><p> }</p><p> 50% {</p><p> width: 100%;</p><p> height: 100%;</p><p> }</p><p> 100% {</p><p> width: 100%;</p><p> height: 100%;</p><p> }</p><p>}</p><p>@keyframes borderColor2 {</p><p> 0% {</p><p> border-bottom-color: #2d2d2d;</p><p> border-left-color: #2d2d2d;</p><p> }</p><p> 50% {</p><p> }</p><p> 51% {</p><p> border-bottom-color: transparent;</p><p> border-left-color: transparent;</p><p> }</p><p> 100% {</p><p> border-bottom-color: transparent;</p><p> border-left-color: transparent;</p><p> }</p><p>}</p><p>
</p><p>
</p><p>
</p><p>.draw3 {</p><p> overflow: hidden;</p><p> position: relative;</p><p>}</p><p>.draw3::before, .draw2::after {</p><p> content: '';</p><p> box-sizing: border-box;</p><p> position: absolute;</p><p> border: 5px solid transparent;</p><p> width: 0;</p><p> height: 0;</p><p>}</p><p>.draw3::before {</p><p> top: 0;</p><p> left: 0;</p><p> border-top-color: #000;</p><p> border-right-color: #000;</p><p> animation: border 10s ;</p><p>}</p><p>.draw3::after {</p><p> bottom: 0;</p><p> right: 0;</p><p> animation: border3 10s 5s , borderColor3 10s 5s ;</p><p>}</p><p>
</p><p>@keyframes border3 {</p><p> 0% {</p><p> width: 0;</p><p> height: 0;</p><p> }</p><p> 25% {</p><p> width: 100%;</p><p> height: 0;</p><p> }</p><p> 50% {</p><p> width: 100%;</p><p> height: 100%;</p><p> }</p><p> 100% {</p><p> width: 100%;</p><p> height: 100%;</p><p> }</p><p>}</p><p>@keyframes borderColor3 {</p><p> 0% {</p><p> border-bottom-color: #2d2d2d;</p><p> border-left-color: #2d2d2d;</p><p> }</p><p> 50% {</p><p> }</p><p> 51% {</p><p> border-bottom-color: transparent;</p><p> border-left-color: transparent;</p><p> }</p><p> 100% {</p><p> border-bottom-color: transparent;</p><p> border-left-color: transparent;</p><p> }</p><p>}</p><p>
</p><p></style></p><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
8년 전
https://www.w3schools.com/css/css3_animations.asp">https://www.w3schools.com/css/css3_animations.asp
이곳을 참고하셔서 공부하시면 좋겠네요^^
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
달려날아
8년 전
n
nanati
8년 전
@달려날아 작성하신 html도 함께 적어주시면 다른분들도 답변드리기 편할 것 같네요^^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
링크 걸어주신 페이지처럼 가장 상위 클래스에 animation-delay 설정해주면 되는거 같은데
뭐가 문제인지 잘 안되네요 ㅠㅠ
열심히 공부해보겠습니다, 감사합니다!