인프런 커뮤니티 질문&답변

김보민 Kim bo min님의 프로필 이미지

작성한 질문수

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

프로그래스바에 애니메이션을 추가하고 싶어요!

21.07.23 10:10 작성

·

118

1

안녕하세요! 강의 너무너무 잘 듣고 있습니다! 한가지 궁금한 점이 있는데, 프로그레스 바에 점점 차오르는 애니메이션을 추가하고 싶어서 코드를 따로 작성을 했는데 첫번째 질문에서 프로그레스바 애니메이션이 적용은 되는데 두번째 질문부터는 적용이 안되어서 어떻게 하면 될 지 궁금해서 질문 남깁니다..! 

.status {
  height: 20px;
  width: 80%;
  background-color: #F8EFFB;
  border-radius: 20px;
  justify-content: flex-start;
  display: flex;
}

.statusbar {
  height: 100%;
  border-radius: 20px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebe9f9+0,d8d0ef+50,cec7ec+51,c1bfea+100;Purple+3D+%231 */
  background: #ebe9f9;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ebe9f9 0%, #d8d0ef 50%, #cec7ec 51%, #c1bfea 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebe9f9', endColorstr='#c1bfea', GradientType=0);
  /* IE6-9 */
  animation: load 1s normal forwards;
}

답변 1

0

판다코딩님의 프로필 이미지
판다코딩
지식공유자

2021. 07. 23. 14:18

클래스 이름으로 애니메이션을 부여하신 것일까요?

load 애니메이션이 어떤 역할을 하는진 잘 모르겠지만,

클래스이름으로 애니메이션을 부여하면,

애니메이션이 부여되는 한 순간만 적용됩니다.

질문을 실행하면서 width값을 변경하고, 그것에 애니메이션을 부여하거나,

부트스트랩을 활용해보시는 것은 어떨까요?