Помогите разобраться с анимацией

Подскажите пожалуйста что поправить. Делаю анимацию на CSS. Что бы при загрузке страницы с некоторой задержкой появлялся объект(изначально он должен быть скрыт). У объекта стоит свойство "opacity: 0" В начале все работает как надо и страница загружается без объекта и проигрывается анимация но как только она кончатся, объект исчезает. Как сделать что бы не исчезал?

@keyframes move{
from{
    margin-bottom: -400px;
    margin-right: -200px;
    transform: rotateY(180deg);
    opacity: 0;
}
to{
 margin-bottom: 0;
 margin-right: 0;
 transform: translateY(0deg);
 opacity: 1; 
}
}  
.animate{
animation-name: move;
animation-duration: 2s;
animation-delay: 2s;
}