Как мне использовать анимацию CSS для перемещения элемента с фиксированной позицией из нижней части страницы в верхнюю?

#animation #css #css-animations

#Анимация #css — код #css-анимация

Вопрос:

http://jsfiddle.net/cD4Gr/1/

Это мой анимационный код:

 @-webkit-keyframes silde_to_top {
    0% {
        bottom: 0%;
        top: defau<
    }
    100% {
        bottom: defau<
        top: 0%;
        z-index: 1000000;
        opacity: 0.5;
    }
}

#test{
    -webkit-animation-name: silde_to_top;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
 

в настоящее время div просто автоматически запускается сверху, вместо того, чтобы скользить вверх. единственное, что оживляет, — это непрозрачность.

Ответ №1:

Он не может анимироваться от значения процента до значения по умолчанию / авто (или наоборот). Этот код заставляет его работать, хотя он запускается за кадром:

 @-webkit-keyframes silde_to_top {
  0% {
    top: 100%;
  }
  100% {
    top: 0%;
    z-index: 1000000;
    opacity: 0.5;
  }
}
 

Вот ваш пример скрипки: http://jsfiddle.net/blineberry/cD4Gr/2 /