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값을 변경하고, 그것에 애니메이션을 부여하거나,
부트스트랩을 활용해보시는 것은 어떨까요?