Примените свойства CSS при завершении перехода

Как я могу применить свойства объявления к элементу после завершения перехода CSS3? У меня есть что-то вроде:

.something {
  background: blue;
  padding: 10px 0px;
  background-clip: content-box;
  transition: box-shadow 300ms;
}
.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 0px;
  margin: 10px 0px;
}

Я хотел бы, чтобы свойства заполнения и поля в объявлении: hover были применены после перехода в 300 мс.

Ответы

Ответ 1

вы можете добавить задержку следующим образом:

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

первый начнется при наведении и последние 300 мс, второй начнется через 400 мс и снова за последние 300 мс.

DEMO

Статья о CSS-трюках

Ответ 2

Вы можете достичь этого, разместив другой элемент внутри или снаружи .something и применив переполнение и переход к новому элементу, но с transition-delay значением, установленным на время, равное или превышающее время вашего начального перехода box-shadow.

Итак, например:

<div class="immediate">
    <div class="later">
        I can haz transitions.
    </div>
</div>

И CSS:

.immediate {
  background: #eeb;
  transition: box-shadow 300ms;
}

.immediate:hover {
  box-shadow: 0 0 3px black;
}

.later {
   margin: 0;
   padding: 10px 0;
   transition: all 400ms;
   transition-delay: 300ms;
}

.later:hover {
   margin: 10px 0;
   padding: 0;
}

Это приведет к переходу box-shadow в 300 мс, а затем margin и padding в 400 мс (вы можете установить это время перехода на 0, если этот эффект вы ищете).

Вы можете попробовать его на jsFiddle: http://jsfiddle.net/gTVVk/2/

РЕДАКТИРОВАТЬ: ответ Дункана Битти будет отлично, если вам не нужно выполнять разные переходы в одном и том же свойстве. В противном случае нет смысла перенапрягать вещи с вложенными div.