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

Можно ли анимировать псевдоклассы 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/

Ответы

Ответ 1

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

EDIT. По состоянию на 2016 год ссылка на статью нарушена, а соответствующая ошибка WebKit была исправлено 4 года назад. Читайте дальше, чтобы увидеть другие ответы, это устарело.

Ответ 2

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

Исправлена ​​ошибка WebKit: http://trac.webkit.org/changeset/138632

ВОЗМОЖНО для анимации псевдо :before и :after, вот несколько примеров для анимации psuedo-элементов :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 или анимацию.)

Ответ 4

Я только узнал, что вы можете анимировать: after and: before (:

Пример кода -

  .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, и мне нужно было оживить его: после. Поэтому я добавил еще один класс, который меняет фон, и я добавил код перехода в основное: после (до анимации)