css 애니메이션 질문입니다...

달려날아

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2017-08-01 (화) 10:08:31 2,790

css 애니메이션 초보입니다.

인터넷상에서 네모를 그리는 css애니메이션을 찾아

응용을 하려 하는데요,

첫번째 네모(draw)를 다 그린 뒤에, 두번째 네모(draw2)를 그리기 시작하고 두번째 네모가 그려지면, 세번째 네모(draw3)를 그리기 시작하는 방법에 대해 문의하고 싶습니다.

animation-delay: 10s;

이런 걸 찾아 draw2 스타일에 넣어봤는데 잘못 넣었는지 적용이 되지 않았습니다.

도움 부탁드릴게요 !!

Copy

<style> .qmanse {width:200px;height:200px;  background: none;  border: 0;  box-sizing: border-box;  box-shadow: inset 0 0 0 5px #fff;  color: #fff;  font-size: inherit;  font-weight: 700;  text-align: center;  text-transform: capitalize;  vertical-align: middle;  animation-delay:10s;}.draw {  overflow: hidden;  position: relative;}.draw::before, .draw::after {  content: '';  box-sizing: border-box;  position: absolute;  border: 5px solid transparent;  width: 0;  height: 0;}.draw::before {  top: 0;  left: 0;  border-top-color: #000;  border-right-color: #000;  animation: border 10s ;}.draw::after {  bottom: 0;  right: 0;  animation: border 10s 5s , borderColor 10s 5s ;}@keyframes border {  0% {    width: 0;    height: 0;  }  25% {    width: 100%;    height: 0;  }  50% {    width: 100%;    height: 100%;  }  100% {    width: 100%;    height: 100%;  }}@keyframes borderColor {  0% {    border-bottom-color: #2d2d2d;    border-left-color: #2d2d2d;  }  50% {  }  51% {    border-bottom-color: transparent;    border-left-color: transparent;  }  100% {    border-bottom-color: transparent;    border-left-color: transparent;  }}.draw2 {  overflow: hidden;  position: relative;}.draw2::before, .draw2::after {  content: '';  box-sizing: border-box;  position: absolute;  border: 5px solid transparent;  width: 0;  height: 0;}.draw2::before {  top: 0;  left: 0;  border-top-color: #000;  border-right-color: #000;  animation: border 10s ;}.draw2::after {  bottom: 0;  right: 0;  animation: border2 10s 5s , borderColor2 10s 5s ;}@keyframes border2 {  0% {    width: 0;    height: 0;  }  25% {    width: 100%;    height: 0;  }  50% {    width: 100%;    height: 100%;  }  100% {    width: 100%;    height: 100%;  }}@keyframes borderColor2 {  0% {    border-bottom-color: #2d2d2d;    border-left-color: #2d2d2d;  }  50% {  }  51% {    border-bottom-color: transparent;    border-left-color: transparent;  }  100% {    border-bottom-color: transparent;    border-left-color: transparent;  }}.draw3 {  overflow: hidden;  position: relative;}.draw3::before, .draw2::after {  content: '';  box-sizing: border-box;  position: absolute;  border: 5px solid transparent;  width: 0;  height: 0;}.draw3::before {  top: 0;  left: 0;  border-top-color: #000;  border-right-color: #000;  animation: border 10s ;}.draw3::after {  bottom: 0;  right: 0;  animation: border3 10s 5s , borderColor3 10s 5s ;}@keyframes border3 {  0% {    width: 0;    height: 0;  }  25% {    width: 100%;    height: 0;  }  50% {    width: 100%;    height: 100%;  }  100% {    width: 100%;    height: 100%;  }}@keyframes borderColor3 {  0% {    border-bottom-color: #2d2d2d;    border-left-color: #2d2d2d;  }  50% {  }  51% {    border-bottom-color: transparent;    border-left-color: transparent;  }  100% {    border-bottom-color: transparent;    border-left-color: transparent;  }}</style>

css