Анимация при прокрутке, а не просто при загрузке страницы ⇐ CSS

[Anonymous]

Я хочу, чтобы панели навыков анимировались при прокрутке, а не просто при загрузке страницы:

Код: Выделить всё

/*Skills*/

.skill-bar .skill-per {
position: relative;
display: block;
height: 0.9rem;
width: 90%;
border-radius: 38px;
background-color: #2b57eb;
animation: progress 0.9s ease-in-out forwards;
opacity: 0;
}

.skill-per.css {
width: 70%;
}

.skill-per.javascript {
width: 50%;
}

@keyframes progress {
0% {
width: 0;
opacity: 1;
}
100% {
opacity: 1;
}
}

.skill-per .tooltip {
position: absolute;
right: -14px;
top: -28px;
font-size: 12px;
font-weight: 500;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
background: #4070f4;
z-index: 1;
}

.tooltip::before {
content: '';
position: absolute;
left: 50%;
bottom: -2px;
height: 10px;
width: 10px;
z-index: -1;
background-color: #4070f4;
transform: translateX(-50%) rotate(45deg);
}

Код: Выделить всё

Skills


HTML


90%




CSS


70%




JavaScript


50%

Подробнее здесь: https://stackoverflow.com/questions/784 ... t-pageload