Как задать правильную анимацию?

Question

[Антон Нечаев]

Нужно, чтобы при клике на hide, для pop исполнялась анимация popdown. А при повторном клике на hide на том же блоке (pop) срабатывало popup (и при загрузке страницы).

Есть примерно такая структура:

<div class="pop">
  <div class="hide">
  </div>
  <div class="obj1">
  </div>
</div>

@keyframes popup {
from {bottom: -500;}
to {bottom: 5;}
}

@keyframes popup2 {
from {bottom: -197;}
to {bottom: 308;}
}

@keyframes popdown {
from {bottom: 5;}
to {bottom: -303;}
}

@keyframes popdown2 {
from {bottom: 308;}
to {bottom: 0;}
}

.obj1 {
  background: black;
  width: 300px;
  height: 350px;
  right: 5;
	bottom: 5;
	vertical-align: bottom;
	margin-bottom: 5;
	position: fixed;
	z-index: 7;
	animation: popup 6s ease;
}

.hide {
  background: white;
  height: 3px;
  width: 15px;
  right: 80;
	opacity: 0.7;
	bottom: 308;
	vertical-align: bottom;
	margin-bottom: 5;
	position: fixed;
	z-index: 8;
	animation: popup2 6s ease;
}

Comments

[Максим Тимофеев]

пишите js, добавляйте по клику класс, который запускает анимацию

[Юрий]

Проще лучше всего действительно на jQuery, потому что на чистом CSS есть только :target, а это далеко не во всех браузерах работает.