Анимировать свойство перехода CSS в рамках: после/: до псевдо-классов

Question

Можно ли анимировать псевдо-классы CSS?

Скажи, что у меня есть:

#foo:after {
    content: '';
    width: 200px;
    height: 200px;
    background: red;
    display: block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#foo:hover:after {
    width: 250px;
    height: 250px;
}

Это вообще возможно? Я тестировал, и до сих пор не могу найти решение. Я пытаюсь обрезать количество поддержки JavaScript, которое мне нужно, используя Modernizr.

У меня уже есть метод JavaScript, поэтому, пожалуйста, нет альтернатив JavaScript.

Демо: http://jsfiddle.net/mxtvw/

Answer 1

Ваша скрипка работает для меня в Firefox. И насколько я знаю, и если эта статья в курсе, это единственный браузер, который может оживить псевдо-элементы.

---

РЕДАКТИРОВАТЬ: По состоянию на 2016 год, ссылка на статью сломана и Соответствующая ошибка Webkit был исправлено 4 года назад. Анкет Читайте дальше, чтобы увидеть другие ответы, этот устарел.

Answer 2

Google Chrome добавил исправление ошибки Webkit в версию 27.0.1453.110 M

Эта ошибка Webkit была исправлена: http://trac.webkit.org/changeset/138632

ЭТО ВОЗМОЖНО анимировать псевдо :before а также :after, вот несколько примеров для анимирования псевдоновых :before а также :after.

Вот модификация вашего примера выше с некоторыми изменениями, которые заставляют его оживить и не гладко без моделирования. mouseleave / mouseout Задержка на падении:

http://jsfiddle.net/mxtvw/234/

Попробуйте добавить основной селектор #foo с сгруппированным :hover псевдо-класс во втором :hover Псевдо-класс Правило. Также добавьте transition свойство, а не только специфические поставщики свойства для transition:

#foo:after{
   display: block;
   content: '';
   width: 200px;
   height: 200px;
   background: red;
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
} 

#foo,
#foo:hover:after,
#foo:hover:before{
   width: 250px;
   height: 250px;
}

Обратите внимание, что в будущем любые псевдо -элементы, такие как :before а также :after должен использовать синтаксис двойной толстой кишки ::before а также ::after. Анкет Этот пример имитирует затухание и вытуронение, используя наложение background-color и background-image на пахни:

http://jsfiddle.net/mxtvw/233/

Этот пример имитирует оживление ротации на падении:

http://jsfiddle.net/jm54s/28/

Конечно, продвигаясь вперед со стандартами CSS3, которые мы могли бы использовать ::before а также ::after.

Это работает в последних Firefox, Chrome, Safari, Opera 18+, IE10, IE11 (IE9 и ниже не поддерживают переходы CSS3 или оживление.)

Answer 3

Это Кажется, не работает Теперь, однако, согласно W3 спецификации Вы можете применять переходы на псевдо-элементы. Может быть, какое -то время в будущем ...

Answer 4

Я только что узнал, что вы можете оживить: после и: до (:

Пример кода-

  .model-item {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: transparent;
      transition: all .3s;
    }
  }

  .opc {
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: rgba(0, 51, 92, .75);
    }
  }

У меня есть Div. Model-Item, и мне нужно было анимировать его: после. Итак, я добавил еще один класс, который меняет фон, и я добавил код перехода в Main: After (до анимации)