Как сделать анимацию в CSS?

Question

[xyoursenemyx]

Создайте 5 полос, расширяющихся в одинаковое время с различными анимациями при наведении курсора на контейнер, содержащий полосы.
Помогите пожалуйста код доработать, учусь в 8 классе немного сложна...

Comments

[Saboteur]

Для начала, следует научиться пользоваться удобными инструментами, и выкладывать не скриншот, а например ссылку на ваш код на https://jsfiddle.net

Во-вторых, следует не задание публиковать, а вопрос что именно у вас не получается.

Если вы в принципе не понимаете что делать, то обратитесь на фриланс.

[xyoursenemyx]

Saboteur, спасибо за ответ

Answer 1

[Дима Паутов]

https://jsfiddle.net/qhmtwxt2/

Answer 2

[Saboteur]

Для начала, следует научиться пользоваться удобными инструментами, и выкладывать не скриншот, а например ссылку на ваш код на https://jsfiddle.net

Во-вторых, следует не задание публиковать, а вопрос что именно у вас не получается.
Если вы в принципе не понимаете что делать, то обратитесь на фриланс.

Ну а в вашем случае, видимо следует заполнить блок

.block:hover{

}

Answer 3

[Aleksey Solovyev]

Если через transition делать, то в :hover конечную позицию элемента вписываете, а самому элементу transition: свойство время
Если через keyframes, то прописываете шаги(0%, 50%, 100% или from{}to{}) и задаете свойство animation: имя время ...
Ну переписывать Ваш код не буду... https://jsfiddle.net/ppmuLsec/5/

ps указываем префиксы...