CSS Transition: Как я могу сделать div-перемещение, паузу, а затем обратное направление с 1 переходом?

Question

я могу использовать простой переход для перемещения влево значение а DIV в

transition: left 1s linear .5s 

, но как я могу, используя только один переход, сделать Div шаг влево, пауза, а затем перейти обратно?

У меня возникли проблемы с поиском, как это сделать. Это возможно?

Answer 1

кажется анимации путь:

http://codepen.io/graygilmore/pen/8d8b41ed278d061764b3df531223a0e1

HTML:

<div class="box"></div> 

CSS:

.box { 
    width: 200px; 
    height: 200px; 
    background: black; 
    position: relative; 
} 

.gogogo { 
    animation: tumble 4s linear; 
} 

@keyframes tumble { 
    0% { 
    top: 0; 
    left: 0; 
    -webkit-transform:rotate(0deg); 
    } 

    30%, 
    60% { 
    top: 300px; 
    left: 300px; 
    -webkit-transform:rotate(45deg); 
    } 

    100% { 
    top: 0; 
    left: 0; 
    -webkit-transform:rotate(0deg); 
    } 
} 

CoffeeScript:

$(".box").on "click", -> 
    $(".box").toggleClass("gogogo") 

Answer 2

Я не верю, что вы можете это сделать. Если вы выберете this link, вы увидите, что существует много разных способов перехода, но для них требуется два разных состояния. Я думаю, вам нужно будет использовать два из них.