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

달려날아 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017.08.01 10:08:31 조회 2627 (14.♡.♡.48)

본문

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

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

응용을 하려 하는데요,

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

animation-delay: 10s;

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

도움 부탁드릴게요 !!



<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>