Переход на преобразование перевод не работает

Question

Кто-нибудь знает, как оживить переход правильно? Как вы можете видеть в коде, после небольшой задержки div должен двигаться вверх. Я не мог заставить его работать.

Codepen: http://codepen.io/thijs-webber/pen/jqgPrK

HTML:

<div class="test"> 
    test 
</div> 

CSS:

.test{ 
    background-color: lime; 
    width: 100px; 
    margin: 0 auto; 
    margin-top: 100px; 
    height: 100px; 
    padding: 10px; 
    text-align: center; 
    line-height: 100px; 

    -moz-transform: translate(0, -100px); 
    -webkit-transform: translate(0, -100px); 
    -o-transform: translate(0, -100px); 
    -ms-transform: translate(0, -100px); 
    transform: translate(0, -100px); 

    transition: transform 1s ease-out; 
    -webkit-transition: transform 1s ease-out; 
    -moz-transition: transform 1s ease-out; 
    -ms-transition: transform 1s ease-out; 
    -o-transition: transform 1s ease-out; 

    transition-delay: 1s; 
} 

Answer 1

Использование триггера является одна идея, но если вы не хотите какой-либо триггер, вы просто должны использовать CSS3 keyframes

Вот ваш код с ним:

.test{ 
 
    background-color: lime; 
 
    width: 100px; 
 
    margin: 0 auto; 
 
    margin-top: 100px; 
 
    height: 100px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
    
 
    -moz-transform: translate(0, -100px); 
 
    -webkit-transform: translate(0, -100px); 
 
    -o-transform: translate(0, -100px); 
 
    -ms-transform: translate(0, -100px); 
 
    transform: translate(0, -100px); 
 

 
    
 
    -moz-transform: translate(0, -100px); 
 
    -webkit-transform: translate(0, -100px); 
 
    -o-transform: translate(0, -100px); 
 
    -ms-transform: translate(0, -100px); 
 
    transform: translate(0, -100px); 
 

 
    animation-name: moveUp; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease-out; 
 
    animation-duration: 1s; 
 
    
 
} 
 

 
@keyframes moveUp { 
 
    0% { 
 
     transform: translate(0); 
 
    } 
 
    100% { 
 
     transform: translate(0, -100px); 
 
    } 
 
}

<div class="test"> 
 
    test 
 
</div>

Я добавил необходимые анимации стили, такие как имя (используется в keyframes), сколько раз должно произойти эта анимация, сроки-функция и продолжительность, соответственно:

animation-name: moveUp; 
animation-iteration-count: 1; 
animation-timing-function: ease-out; 
animation-duration: 1s; 

Я надеюсь, что это помогает!

Answer 2

Он работает, но из-за не триггер, вы не можете наблюдать за его движением. Когда вы загрузили страницу, переход уже был завершен. Если вы хотите наблюдать переход, должен быть такой триггер, как hover, или вы можете использовать метод анимации css. В наведении курсора - триггер. Как я уже сказал, если вы хотите, чтобы он работал, когда страница открыта, вы можете использовать анимацию.

.test{ 
 
    background-color: lime; 
 
    width: 100px; 
 
    margin: 0 auto; 
 
    margin-top: 100px; 
 
    height: 100px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    line-height: 100px; 
 

 
    transition: transform 1s ease-out; 
 
    -webkit-transition: transform 1s ease-out; 
 
    -moz-transition: transform 1s ease-out; 
 
    -ms-transition: transform 1s ease-out; 
 
    -o-transition: transform 1s ease-out; 
 

 
    
 
    
 
    } 
 

 
    .test:hover{ 
 
    
 
    -moz-transform: translate(0, -100px); 
 
    -webkit-transform: translate(0, -100px); 
 
    -o-transform: translate(0, -100px); 
 
    -ms-transform: translate(0, -100px); 
 
    transform: translate(0, -100px); 
 

 
    
 
}

<div class="test"> 
 
    test 
 
    </div>