[web][css] transition, animation

transition

파란색으로 로딩되는 부분을 div로 만들어서 해야하는줄 알았는데

가상요소를 만들어서 하는 방법도 있었다

.line-button{
  position: relative;
  padding: 18px 30px;
  line-height: 1.25;
  font-size: 20px;
  /* 마우스 모양 바꾸기 */
  cursor: pointer;
}
/* 가상요소만들기 */
.line-button::after{
  content: '';
  /* 아래,왼쪽에 붙어있어야하기 때문 */
  left: 0;
  bottom: 0;
  /* 가상요소는 만들지만 hover했을때 효과가 나타나야하기 때문에 넓이가 0  */
  width: 0;
  height: 3px;
  /* line-button에 붙어있도록 */
  position: absolute;
  background-color: blue;
  /* 넓이가 2.5s속도로 천천히-빠르게 */
  transition: width 250ms ease-in;
}
/* hover에 배경색을 지정하면 hover를 하지 않았을때 서서히 배경색이 사라지는게 아니라 바로 원래대로 돌아감 */
/* 마우스를 올렸을때 가상요소의 변화주기 */
.line-button:hover::after{
  width: 100%;
}

 

 

animation

transition으로 가능한 부분이지만 animation으로도 할 수 있다

실무에서는 transition을 더 많이 사용하는 편!

/* loading 글자 */
.loading-title{
  width: 80px;
  height: 24px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  position: absolute;
  top: 80px;
  left: 210px;
  /* 로딩 글자에 애니메이션 효과 */
  animation-name: flicker; 
  animation-duration: 1600ms;
  animation-iteration-count: infinite;
  /* alternate 설정시 텍스트가 스르륵 바뀜 */
  animation-direction: alternate;
}
.progress-bar{
  position: absolute;
  width: 300px;
  height: 12px;
  background-color: #E5EAEF;
  top: 120px;
  left: 100px;
  margin-top: 20px;
  border-radius: 100px;
  overflow: hidden;
}
.progress-bar-gauge{
  position: absolute;
  width: 100%;
  height: 12px;
  left: 0;
  top: 0;
  background-color: #13CE66;
  border-radius: 100px;
  /* 초록색 부분 애니메이션 */
  animation-name: loading-bar;
  animation-duration: 1600ms;
  animation-iteration-count: infinite;
  /* 빨랐다가 느려지게 */
  animation-timing-function: ease-out;
}
/* 애니메이션 효과 */
@keyframes flicker {
  /* opacity로 투명도를 1부터 0까지 (나타났다가 사라졌다가)*/
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
@keyframes loading-bar{
  /* 0% ~ 90%까지 넓이를 100%채우는데 투명도는 1을 유지 */
  0%{
    width: 0;
    opacity: 1;
  }
  90%{
    width: 100%;
    opacity: 1;
  }
  /* 90% ~ 100%는 넓이를 100%유지하는데 투명도를 0으로; 스르륵 사라지는 것 처럼 */
  100%{
    width: 100%;
    opacity: 0;
  }
}