Добрый день, возник вопрос по поводу анимации
https://jsfiddle.net/BlackStar1991/qdtpypob/3/
Как сделать так что б анимация заканчивалась на последнем кадре. Что б она не переходила в начальное состояние по завершению.
- почему у меня класс .center не центрирует мои встроенные блоки по центру блока .place. (Или как вообще происходит центрирование блока в середине блока ???)судя по твоему коду в твоем блоке центр вообще ничего нету, ибо элементы ты с позиционировал относительно родителя place. А остальное я ваще не понимаю что там за… 
и вообще зачем этот блок если вы позиционируете абсолютно элемент, с позиционируйте нужный вам элемент там где вам надо относительно родителя, насчет стоп анимации не знаю ответа.
Алексей, вот про позиционирование и шла речь. Я побывал блоку .center придать position: absolute; и уже тогда его спозиционаривать, относительно родителя, но тогда у меня “сыпятся” все элементы которые находятся в этом блоке.
Есть ли ещё какая возможность заниматься позиционированием элементов кроме игры в задай правильно position: ?
Для начала расскажите, как именно это должно выглядеть. Где расположен блок с анимацией, слева от формы или так и надо, что он ее перекрывает?
Чтобы остановить анимацию на последнем кадре, используется свойство animaion-fill-mode со значением forwards.
`.place {
position: relative;
width: 500px;
height: 500px;
background: black;
}
.center {
position:absolute;
width:300px;
top:40%;
left:20%
}
/* #info{
position: absolute;
top:50%;
left:50%;
} */
input[type=“text”], input[type=“password”], input[type=“submit”] {
box-sizing: border-box;
width: 100%;
padding: 5px 10px;
color: red;
border: 2px solid black;
border-radius: 5px;
}
.rectangle{
display:inline-block;
width: 1px;
height: 180px;
padding-left: 10px;
margin: 10px 5px;
background: blue;
border: 1px solid white;
}
.gate {
animation-name: lift-up;
animation-duration: 1s;
animation-timing-function: linear;
}
@keyframes lift-up {
from{ transform: translateY(0px)}
50%{transform: translateY(-100px)}
100%{ transform: translateY(-200px)}
}
`
вот этого вы хотели?
Если надо блок с анимацией сделать ниже или выше задайте ему абсолютное позиционирование и с позиционируйте как надо.
.gate {position:absolute; top:10px; animation-name: lift-up; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode:forwards; }
вот так
спасибо, я запишу насчет остановки анимации)
`.place {
position: relative;
width: 500px;
height: 500px;
background: black;
}
.center {
position:absolute;
width:300px;
top:40%;
left:20%
}
/* #info{
position: absolute;
top:50%;
left:50%;
} */
input[type=“text”], input[type=“password”], input[type=“submit”] {
box-sizing: border-box;
width: 100%;
padding: 5px 10px;
color: red;
border: 2px solid black;
border-radius: 5px;
}
.rectangle{
display:inline-block;
width: 300px;
height: 180px;
background: rgba(16,168,206,.9);
border: 1px solid white;
}
.gate {position:absolute;
top:10px;
animation-name: lift-up;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
span{
display:block;
font-size:30px;
text-align:center;
white-space:wrap;
margin:45px;
color:#6C0F12;
}
@keyframes lift-up {
from{ transform: translateY(0px)}
50%{transform: translateY(-100px)}
100%{ transform: translateY(-200px)}
}
`
Гулять так гулять 
Большая часть ваших вопросов отпала бы, если бы вы прошли все курсы на htmlacademy. Остальное решилось бы через гугл.
tokkusu, а мне не стыдно спрашивать. Я новичок в верстке, а форумы для того и созданы что б обмениваться и делится информацией. Если я чего не допонял пройдя курс htmlacademy, то тут меня и поправят) (кому не влом конечно)
ПС А Гугл вообще на всё ответы знает, так нафига вообще с людьми общаться ? 
У данного пользователя бывают очень интересные задачи которые он себе ставит, благодаря им и он получает знания и мы получаем практику в решении не стандартных задач