Css анимация сверху к центру ⇐ CSS

[Anonymous]

Это моя установка. Я хочу, чтобы контент был скрыт чуть выше верха, а затем по требованию анимировал его по центру. Очевидно, что при использовании следующего открытого класса CSS эта анимация не дает желаемого эффекта (но содержимое центрируется при добавлении открытого класса).
Могу ли я добиться этого с помощью CSS или мне нужен JavaScript?
Могу ли я добиться этого с помощью CSS или мне нужен JavaScript?
Могу ли я добиться этого с помощью CSS или мне нужен JavaScript?
Могу ли я добиться этого с помощью CSS или мне нужен JavaScript? p>

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

var content = document.querySelector('.content')

document.querySelector('#toggle').addEventListener('click', function() {

if (content.classList.contains('opened')) {
content.classList.remove('opened')
} else {
content.classList.add('opened')
}

})

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

.wrap {
position: relative;
width: 300px;
height: 300px;
background: #ddd;
overflow: hidden;
}

.content {
position: absolute;
bottom: 100%;
transition: all 0.5s;
}

.opened {
transform: translateY(-50%);
bottom:auto;
top:50%;
}

#toggle {
position: absolute;
top: 0;
left: 340px;
}

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

Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.



[url=#]toggle[/url]

Подробнее здесь: https://stackoverflow.com/questions/787 ... -to-center