Однонаправленная анимация

Question

В настоящее время я использую классический переход при изменении ширины.

transition: width 0.6s ease; 

(http://jsfiddle.net/qzbd8mpc/)

Я хотел бы иметь анимацию, которая происходит только слева направо, справа налево, должен быть мгновенным.

Возможно ли это сделать в чистом CSS (без удаления класса с использованием javascript)?

Редактировать: новая скрипка, чтобы показать хороший вариант использования.

Answer 1

Вы можете использовать анимацию вместо перехода Таким образом, вы можете сделали это, используя только CSS3 код CSS приводится ниже

div { 
    width: 100px; 
    height: 50px; 
    background: black; 
    color: white; 
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ 
    animation: myfirst 5s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes myfirst { 
    from {width: 100px;} 
    to {width: 400px;} 
} 

/* Standard syntax */ 
@keyframes myfirst { 
     from {width: 100px;} 
     to {width: 400px;} 
    } 

в этом случае вам не нужно JavaScript Вы можете указать, когда изменение произойдет в процентах, или вы можете использовать ключевые слова «от» и «до» (что составляет 0% и 100%).

0% представляет собой начало анимации, 100% - это когда анимация завершена. , и когда анимация закончена, она возвращается к первоначальному стилю.