Не работает вторая анимация CSS, почему?

Question

[Капитан Какао]

Всем привет, столкнулся с такой проблемой, что если ставить несколько анимаций, то отрабатывает только первая, помогите разобраться в чём проблема.

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

@keyframes lr {
    0% {
        transform: translateX(-500px);    
    }
    100% {
        transform: translateX(0);    
    }

вторая заработает. Что я делаю не так?

Пример кода: https://jsfiddle.net/L5dfu181/

Answer 1

[Nwton]

} Скобочку пропустил...
https://jsfiddle.net/L5dfu181/1/
А вообще, оформляй код адекватно:
https://jsfiddle.net/L5dfu181/4

Comments

[Капитан Какао]

Блиинн, точно) Спасибо!)

[Капитан Какао]

Слушай, а вот при таком раскладе у нас как бы при загрузке страницы второй элемент виден сразу, после отработки первой анимации второй элемент исчезает и появляется.
Не оч крассиво.

Не подскажешь как сделать так, что бы по умолчанию не было ни чего, потом выезжал первый квадрат, после второй. И что бы они оставались на странице уже и не исчезали.

[Nwton]

Rad Cor: я могу только так сделать, но есть варианты более оптимальные, не особо в этом разбираюсь: https://jsfiddle.net/L5dfu181/5/

[Капитан Какао]

Nwton: такой варик не подходит) ладно, буду гуглить) спасибо)