Я никогда не был большим поклонником анимации CSS (и у меня все еще есть сомнения), но когда дело доходит до чисто презентационной анимации, я чувствую, что это имеет смысл. Я использую экономно и таким образом, чтобы улучшить обратную связь с пользователем, я чувствую, что это может сделать ваш сайт более отточенным. С текущим редизайном я экспериментировал слева и справа, но мне не хватало одной вещи — поддержка фоновых переходов (изображений). Не удовлетворенный этой очевидной пустотой, я пытался найти способы обойти.
CSS переход
css переходы — это специальный вид (автоматизированной) анимации, где css будет анимировать различные значения одного свойства css, вызванные изменением состояния его базового элемента. Наиболее распространенное и очевидное использование — это: состояния при наведении (или связанные), применение небольших анимаций для цветов при наведении и тому подобное.
Эти переходы основаны на работе с числовыми значениями, что, к сожалению, является довольно ограничивающим фактором. По-прежнему возможен переход между цветами (так как они могут быть представлены шестнадцатеричными значениями) и т.п., но переход между различными фоновыми изображениями пока недоступен. Это настоящий позор, так как я хотел, чтобы на главной панели этого блога был небольшой эффект исчезновения цвета. К счастью для меня, были и другие варианты для изучения.
введение: непрозрачность переходов
Повторно используя один из старых приемов ( изменение изображений hmtl при наведении ), на самом деле довольно легко достичь желаемого результата. Свойство, которое поможет нам в этом, — непрозрачность CSS.
Идея состоит в том, чтобы поместить два слоя прямо друг на друга. При наведении мы будем использовать css-переход значения непрозрачности верхнего слоя, поэтому нижний слой постепенно начнет просвечивать. Когда анимация будет завершена, непрозрачность верхнего слоя будет равна 0, и все, что мы сможем увидеть, — это нижний слой (другими словами, состояние наведения).
Метод 1: два структурных элемента
.outer {background:(hover-bg); position:relative;} .outer .inner {transition:opacity 0.2s linear; background:(bg);}
.outer .inner {position:absolute; left:0; right:0; top:0; bottom:0;} .outer:hover .inner {opacity:0;}
Как видно из приведенного выше кода, фон при наведении указывается в самой нижней плоскости. Внутренний элемент расположен поверх внешнего элемента, так что оба фона будут точно совпадать. При наведении мыши непрозрачность внутреннего элемента будет уменьшена до 0, в результате чего у нас останется изображение фона наведения. Имейте в виду, что если у вас есть другой контент, вложенный во внутренний элемент, он тоже исчезнет, поэтому для безопасности лучше всего создать самозакрывающийся пустой элемент .inner. Не очень чистый (я знаю), но он делает свое дело. Имейте в виду, что вам все еще нужно добавить все префиксы вендора для -transition, чтобы это работало в разных браузерах.
Это 2011 год, так что было бы неправильно не использовать опцию: after /: before для более чистого кода.
метод 2: один структурный элемент
.base {background:(hover-bg); position:relative;} .base:after {transition:opacity 0.2s linear; background:(bg);}
.base:after {position:absolute; left:0; right:0; top:0; bottom:0;} .base:hover:after {opacity:0;}
Разве это не прекрасно, рабочий пример без необходимости каких-либо дополнительных структурных элементов. Нет поддержки hover для ie7 или ниже (конечно), но небольшой javascript может легко это исправить. Вместе с ie8 вам также понадобится фильтр прозрачности ie, чтобы он работал (или просто используйте видимость: скрытый, если вы не хотите его анимировать).
Но … ты знаешь, что это грядёт, верно? Очевидно, Webkit (о да, мы сейчас разрабатываем для современных браузеров) не поддерживает CSS-переходы на псевдоэлементах. Вероятно, на то есть веская причина (и это не совсем Webkit bash, который, в свою очередь, поддерживает довольно много вещей, которые другие браузеры не поддерживают), но почему-то я не могу удержаться от острого чувства разочарования, которое после всех этих лет мы все еще имеем дело с частичными и / или ошибочными реализациями даже в последних браузерах. Потому что давайте посмотрим правде в глаза, CSS-переходы существуют уже некоторое время и вряд ли являются экспериментальными.
вывод
Поэтому, если вы просматриваете этот сайт с помощью Chrome или Safari, вы не увидите исчезновение цвета в логотипах (основная навигационная навигация). Я мог бы включить дополнительный структурный элемент, но был слишком упрям, чтобы пройти через это для чего-то, что называет себя современными браузерами класса A. Так что на данный момент пользователи Webkit имеют простой эффект наведения, пока Webkit не исправит отсутствие поддержки переходов CSS.
Для более профессиональных проектов я бы предложил использовать первый метод. Он может быть не очень чистым с использованием пустого структурного элемента (вы все равно можете вставить его с помощью javascript, если хотите), но по крайней мере он выполняет свою работу в большинстве современных браузеров.
С http://www.onderhond.com/blog/work/css-background-transitions-how-to