Я работаю над созданием индикатора выполнения для этого проекта и не могу это сделать? [закрыто] ⇐ CSS

[Гость]

Я работаю над созданием индикатора выполнения для этого проекта, над которым работаю, и я наполовину справился с этим, но теперь я уперся в стену, с которой, похоже, не могу справиться.

HTML

Технические навыки HTML CSS

.section { дисплей: гибкий; flex-wrap: обертка; } .container1{ ширина: 600 пикселей; высота: 500 пикселей; отступ: 75 пикселей 90 пикселей; поле слева: 120 пикселей; } .heading1{ выравнивание текста: по центру; оформление текста: подчеркивание; смещение подчеркивания текста: 10 пикселей; толщина текста-декорации: 5 пикселей; поле внизу: 50 пикселей; } .бар{ размер шрифта: 23px; } .Технические-бары .bar { маржа-верх: 40 пикселей 0; } .Technical-bars .bar:first-child { маржа-верх: 0; } .Technical-bars .bar:last-child { поле-дно: 0; } .Технические-бары .бар .info { поле внизу: 5 пикселей; } .Технические-бары .bar .info span{ размер шрифта: 17 пикселей; вес шрифта: 500; анимация: showText 0,5 с 1 с линейно вперед; непрозрачность: 0; } .Технические-бары .bar .progress-line{ положение: относительное; граница-радиус: 10 пикселей; ширина: 100%; высота: 5 пикселей; цвет фона: # 000000; анимация: анимировать 1 с кубической Безье (1,0,0,5,1) вперед; преобразование: масштабX (0); преобразование-происхождение: влево; } @keyframes анимировать{ 100%{ преобразование: масштабX(1); } } .Technical-bars .bar .progress-line span{ высота: 100%; цвет фона: # 0ef; позиция: абсолютная; радиус границы: 10 пикселей; анимация: анимация 1 с 1 с кубической Безье (1,0,0,5,1) вперед; преобразование: масштабX (0); преобразование-происхождение: влево; ширина: 75%; } .progress-line.html диапазон{ ширина: 90 пикселей; } Я все перепробовал, но ничего не помогает? Я думаю, что что-то не так в свойствах CSS, я не знаю, может ли кто-нибудь узнать, в чем ошибка?