CSS анимация не анимация

Question

Я хочу сделать menu slider с CSS animations.

Моя анимация работает, но она просто показывает начальное и конечное состояние без постепенного оживления.

Проверьте мое перо, я сделал (CSS мало облажался, но ошибка/ошибка есть): click here for pen

Цените всяческую помощь.

Answer 1

Вы можете попробовать вот так.

@keyframes openmenu { 
    0% {width: 0%;} 
    100% {width: 100%;} 
} 

@keyframes closemenu { 
    0% {width: 100%; } 
    100% {width: 0%;} 
} 

PEN: http://codepen.io/anon/pen/xRJBJj

Answer 2

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

См ручке here

Заменить классы со следующими стилями:

.open-menu { 
    max-width: 400px; 
    max-height: 400px; 
    transition: all 2s ease; 
} 

.close-menu { 
    max-width: 0; 
    max-height: 0; 
    transition: all 2s ease; 
} 

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

Таким образом, мы обычно устанавливаем max-height и max-width значениям, ширина и высота которых никогда не достигнут.