Переходные эффекты в css

Когда CSS Nesting появится в браузерах?Скопировать ссылку

На этот вопрос есть два ответа: «никогда» и «не менее чем через два года».

Ответ «никогда» может показаться странным, но это связано с отсутствием сигналов от разработчиков браузеров. Всё, что у нас есть — это черновик спецификации, пусть и официальный и прошедший публичную дискуссию. А вот про мнение производителей браузеров или какие-либо обсуждения пока ничего не известно, по крайней мере мне. В трекерах есть достаточно свежие тикеты (Blink, Firefox, Safari), но подробностей там нет — просто чтобы было. На «Can I Use» тоже пока не добавили.

Сегодня для новых фич такого масштаба необходим консенсус разработчиков ключевых браузеров, что функциональность должна быть в веб-платформе и это будет реализовано в браузерных движках. Разработчики — практики (а пока была только теория), и они потенциально могут найти технические проблемы, которые не позволят внедрить CSS Nesting либо вообще, либо в текущем виде. Поэтому, пока нет официального кивка со стороны разработчиков браузеров, будет сохраняться вероятность, что CSS Nesting не случится никогда.

Но допустим, что вендоры браузеров взяли и договорились, что CSS Nesting быть. Допустим, это случилось сегодня. Это не значит, что все тут же кинутся пилить. CSS Nesting — это мега-эпик, а эпики на этот год уже спланированы, вроде инициативы Compat2021. Так что попасть в планы CSS Nesting сможет только ближе к следующему году, а появляться в релизах начнёт не раньше второй половины 2022 года. И это оптимистичные прогнозы.

Для того, чтобы понять почему такие прогнозы, стоит пройтись по ключевым частям, которые предстоит реализовать.

Изменение парсера CSSСкопировать ссылку

Технически не очень сложно. Если бы CSS Nesting был синтаксическим сахаром, то на этом пункте бы всё и закончилось

Эта часть является критичной, так как влияет на скорость загрузки страниц, поэтому внимание к этим изменениям будет повышенное. Хотя синтаксис CSS Nesting спроектирован так, чтобы иметь как можно меньшее влияние на время разбора

Поэтому тут ожидается меньше всего сложностей.

Матчинг селекторовСкопировать ссылку

По идее, наиболее сложную часть в браузерах уже реализовали — это псевдоклассы и . Конечно, это явно не связанные вещи, но ведь вложенные правила можно развернуть в линейный список используя эти псевдоклассы. Конечно, ещё нужно написать эту конвертацию и могут возникнуть нюансы. Но наличие и  явно упрощает внедрение CSS Nesting. И вероятно, как я писал выше, CSS Nesting можно будет использовать для оптимизаций. Но это неточно.

Расширение CSSOMСкопировать ссылку

Само расширение (новые интерфейсы и расширение старых) не столь сложно, сколько сложна реализация логики по обновлению стилей при изменении структур CSSOM (то есть добавление и удаление вложенных правил)

Ведь тут важно чтобы это не просто работало, но и работало быстро. А это всё за рамками спецификации

Переработка атрибута Скопировать ссылку

Именно «переработка», так как сейчас этот атрибут задаёт стили только для самого элемента, которые не влияют на стили дочерних элементов (кроме наследуемых свойств), не создают псевдоэлементы, не определяют состояний и условий (псевдоклассы), не реагируют на изменение окружения (). Этим фактом не могли не воспользоваться для оптимизаций. Очевидно, что часть оптимизаций работать перестанет. Возможно только в случае, если в значении атрибута используются конструкции из CSS Nesting. Но в любом случае, придётся придумывать новую машинерию, чтобы всё заработало. Чего только стоит ситуация, что для вложенных правил (rule) в  корнем будет является некий виртуальный блок без селектора. Вероятно нужно будет мёржить правила из  с правилами из таблиц стилей, причём этот мёрж должен быть для каждого элемента и на лету. И всё это выглядит как угроза для производительности и в целом всё непросто. Пока этот пункт про кажется самым сложным и рискованным.

Браузерные DevToolsСкопировать ссылку

Очевидно, что их нужно будет доработать, чтобы поддержать новую функциональность. Самое сложное придумать, как это отобразить. Вероятно придётся переосмыслить способ представления стилей в инспекторе. И ещё проверить, что нигде ничего не взорвалось.

ТестыСкопировать ссылку

Для CSS тесты пишут как общие для спеки (пишут всем миром), так и конкретно под браузер, если нужно протестировать некоторые особенности. Тестов пока нет, и это тоже потребует немало времени и усилий. Без полного набора тестов нельзя будет сказать, корректно ли и полностью ли реализована функциональность.

В общем, объём работы выглядит внушительным. Поэтому на быстрое внедрение рассчитывать не приходится.

Пример 9

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

<div class="view view-ninth">
	<img src="images/11.jpg" />
	<div class="mask mask-1"></div>
	<div class="mask mask-2"></div>
	<div class="content">
		<h2>Стиль #9</h2>
		<p>Описаниеt</p>
		<a href="#" class="info">Кнопка</a>
	</div>
</div>

Две маски имеют различные параметры для трансформаций. Также они выравнены по-разному.

.view-ninth .mask-1,
.view-ninth .mask-2{
    background-color: rgba(0,0,0,0.5);
    height: 361px;
    width: 361px;
    background: rgba(119,0,36,0.5);
    opacity: 1;
    transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
    left: auto;
    right: 0px;
    transform: rotate(56.5deg) translateX(-180px);
    transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
    top: auto;
    bottom: 0px;
    transform: rotate(56.5deg) translateX(180px);
    transform-origin: 0% 100%;
}

Содержание стилизовано так, что выглядит появляющимся из тонкой линии соприкосновения масок:

.view-ninth .content{
    background: rgba(0,0,0,0.9);
    height: 0px;
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    transform: rotate(-33.5deg) translate(-112px,166px);
    transform-origin: 0% 100%;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
    display: none;
}

При наведении курсора мыши появляется содержание из границы соприкосновения масок:

.view-ninth:hover .content{
    height: 120px;
    width: 300px;
    opacity: 0.9;
    top: 40px;
    transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
	transition-delay: 0s;
}
.view-ninth:hover .mask-1{
    transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
    transform: rotate(56.5deg) translateX(-1px);
}

Для масок используется свойство transition-delay, поэтому при наведении курсора мыши трансформации начинаются немедленно. Но обратная трансформация осуществляется с задержкой, чтобы содержание успело свернуться.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Изменение цвета границ

Еще один интересный эффект – изменение цвета границ элемента при наведении курсора. Для его реализации применяется переход с использованием тени для блока:

<!DOCTYPE html>
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet" type="text/css">
<style type="text/css">
body > div
     {    
            margin:121px 149px;            
            width:483px;
            height:298px;            
            background:#676470;
            color:Gainsboro ;
             
            font-family:Helvetica;
            font-weight:900;
            font-size:48px;            
            text-align:center;
            line-height:298px;            
            transition:all 0.3s;            
        }      
     .border:hover
{
        box-shadow: inset 0 0 0 25px Lavender ;
}
</style>
</head>
<body>
<div class="border">BORDER</div>
</body>
</html>

Поддержка браузерами: Google Chrome, Microsoft Edge, Firefox, Opera, Safari.

CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

Заказать звонок

Предположим, у вас на сайте есть какая-то кнопка, блок, изображение или любой другой элемент, и вы хотите добавить к нему такой эффект. Для этого нам нужно будет сделать следующее:

  1. 1.Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
  2. 2.Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

    PHP

    <div class=»coll-me-btn hover-effect1″>Заказать звонок</div>
    <img src=»images/example3.jpg» alt=»Пример изображения для эффектов при наведении» class=»hover-effect1″ />

    1
    2
    3

    <div class=»coll-me-btn hover-effect1″>Заказатьзвонок<div>

    <img src=»images/example3.jpg»alt=»Пример изображения для эффектов при наведении»class=»hover-effect1″>

    Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

    Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

  3. 3.После того как мы присвоили нужный класс, нам нужно в файл style.css активной темы добавить определенный фрагмент кода, который собственно говоря, и позволит нам добавить тень.
  4. 4.Для внесения изменений в файл стилей либо подключаемся к нашему сайту по FTP. Я для этого обычно использую программу NotePad++.

    Как пользоваться программой NotePad++ я рассказывала в этой статье: Редактирование файлов сайта в Notepad++

    Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

  5. 5.Прокручиваем в самый конец и здесь, в самом конце нашего файла нам необходимо добавить следующий CSS-код:

    PHP

    /**Появление тени**/
    .hover-effect1 {
    -webkit-transition: all 0.5s ease;
    -moz-transition
    : all 0.5s ease;
    transition: all 0.5s ease;
    }
    .hover-effect1:hover {
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow:0 0 10px #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    /**Появление тени**/

    .hover-effect1{

    -webkit-transitionall0.5sease;

    -moz-transitionall0.5sease;

    transitionall0.5sease;

    }
     

    .hover-effect1hover{

    -moz-box-shadow10px#000;

    -webkit-box-shadow10px#000;

    box-shadow10px#000;

    -webkit-transitionall0.5sease;

    -moz-transitionall0.5sease;

    transitionall0.5sease;

    }

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover.
CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

Далее для того, что бы эффект был более плавным, мы используем CSS-свойство transition. И здесь у нас указывается задержка в секундах, то есть, насколько плавно будет происходить смена CSS-эффектов.

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

Селектор потомков

Возможно, вы заметили, что в нашем первом абзаце больше нельзя отличить от остального текста абзаца, так как правило .synopsis задает отображение курсивом всего текста абзаца.

Чтобы изменить этот элемент , можно было бы добавить к нему еще один класс. Но это приведет к тому, что код будет не очень удобен. Мы хотим иметь правило .synopsis в качестве отдельного независимого компонента, для которого можно полностью задать стили через CSS . То есть без необходимости внесения изменений в HTML только для того, чтобы изменить какие-то стили:

Это то, для чего предназначены CSS селекторы потомков. Они позволяют настраивать только те элементы, которые находятся внутри другого элемента. Например, можно вывести этот элемент в абзаце .synopsis со следующими стилями:

Добавление этого правила в файл styles.css задаст отображение вертикальными ( римскими ) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац

. При этом остальных элементов , размещенных на странице это изменение не коснется:

Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы внутри заголовков:

Пример с использованием только CSS

Обязательным свойством для простейшей версии этого эффекта является , фиксирующее расположение фонового изображения внутри окна просмотра (viewport). (Противоположный эффект достигается с помощью ).

6. Кадрирование изображения при помощи анимации

Как и в случае с “прилипающим футером”, до CSS3 было очень сложно кадрировать изображение. Сейчас же у нас есть два свойства, которые упрощают этот процесс: и . Вместе они позволяют изменять размеры изображения, не влияя на соотношение его сторон.

Да, всегда есть возможность кадрировать ваше изображение в фоторедакторе, но большим преимуществом кадрирования в браузере является то, что это можно сделать при помощи анимации.

Чтобы продемонстрировать этот прием как можно проще, нижеприведенный пример запускает эффект при помощи тега . Таким образом, мы сможем использовать псевдокласс в CSS и нам не потребуется никакой JavaScript:

7. Режимы наложения

Если у вас есть опыт использования Adobe Photoshop, тогда вы, вероятно, знаете, насколько разнообразными могут быть режимы наложения для создания неповторимых и интересных эффектов. Но знаете ли вы, что большинство из этих режимов наложения также доступны в CSS?

Вот так выглядит домашняя страница Medium, если у изображений выставлено свойство на светло-голубой (lightblue) и на :

Свойство определяет режим смешивания цветов выбранного элемента с нижележащими слоями. Так, например, вы можете создавать подобные эффекты, используя с и цвет фона .

Примечание: В настоящее время в Chrome 58+ имеется ошибка, из-за которой не будет отображаться на элементах, расположенных в тегах или , у которых не задан цвет. Проще всего в этой ситуации назначить этим тегам свойство .

8. Имиджборд в стиле Pinterest

CSS Grid и Flexbox значительно упростили процесс создания различных типов адаптивных макетов, а также позволили нам легко центрировать элементы по вертикали, что прежде было очень сложно.

Тем не менее, есть тип макета, к которому эти инструменты плохо подходят. Данный макет используется Pinterest — в нем вертикальное расположение каждого элемента изменяется в зависимости от высоты элемента над ним.

Самый лучший способ добиться такого же результата — использовать в CSS свойства колонок. Чаще всего они используются для создания нескольких колонок текста в газетном стиле, но есть и другой отличный пример использования.

Чтобы это сработало, вам нужно обернуть свои элементы в и присвоить этому блоку свойства и .

Затем, чтобы предотвратить разделение элементов между двумя колонками, добавьте отдельным элементам.

Приведенный выше пример также отлично иллюстрирует псевдокласс . Он идет вместе с псевдоклассом , поэтому все элементы, кроме того, на который наведен курсор, угасают.

Дополнительные ресурсы

Я надеюсь, что вышеприведенные примеры прояснили некоторые полезные CSS эффекты и, возможно, даже привлекли ваше внимание к функциям, о которых вы до этого не знали. Было трудно составить список из 8 CSS приемов, так как были и другие пункты, которые я бы хотел добавить

К ним относятся такие функции, как keyframe анимация, scroll-snapping (умная прокрутка), более сложная панель навигации, 3D-эффекты, CSS-оптимизация веб-страницы для печати

Было трудно составить список из 8 CSS приемов, так как были и другие пункты, которые я бы хотел добавить. К ним относятся такие функции, как keyframe анимация, scroll-snapping (умная прокрутка), более сложная панель навигации, 3D-эффекты, CSS-оптимизация веб-страницы для печати.

Эти приемы довольно легко изучить самостоятельно, поэтому я оставлю ссылки к моим любимым ресурсам, чтобы вы узнали о них подробнее.

Простой цветовой переход

Чтобы понять принцип работы переходов, нужно рассмотреть реальный пример. Такой пример показан на рисунке ниже, где изменение цвета кнопки при наведении на нее курсора осуществляется с помощью возможностей перехода CSS3:

Если бы это была обычная меняющаяся кнопка, при наведении курсора ее цвет бы менялся с зеленого на желтый резким прыжком. Но при использовании эффекта перехода зеленый цвет переходит в желтый плавно, занимая около полсекунды. Таким же образом происходит и обратный переход при отодвигании курсора. В результате получаем более изящную кнопку.

Смену цвета без эффекта перехода можно реализовать следующим кодом:

А этот код создает кнопку, которая форматируется только что описанным стилем:

Чтобы получить плавное изменение цвета, т.е. переход, нам нужно в только что описанный стиль добавить свойство transition

(Обратите внимание, что это свойство вставляется в обычный стиль (в данном случае стиль slickButton), а не в псевдокласс :hover.)

Как минимум, свойство transition требует установки двух значений: свойства CSS, которое нужно анимировать, и времени, на протяжении которого нужно выполнить изменение стилей. В данном примере переход применяется к свойству background, а время перехода равно 0.5 секунды:

Как вы, несомненно, заметили, в предыдущем коде в стиль были добавлены три свойства transition, вместо обговариваемого одного. Это потому, что стандарт переходов CSS3 все еще находится в процессе разработки и поддерживающие его браузеры требуют применения префиксов разработчиков. Таким образом, чтобы переход работал в браузерах Chrome, Safari, Firefox и Opera, нужно установить три значения свойства transition, добавляя к каждому из них свой префикс разработчика. А для Internet Explorer 10 (который, как ожидается, будет поддерживать переходы) нужно будет добавить еще одну версию свойства, с префиксом -ms-. К сожалению, использование экспериментальных свойств может породить неопрятные таблицы стилей.

Так, в данном примере присутствует один мелкий недостаток, а именно, в активированной кнопке меняются два элемента оформления — цвет самой кнопки и цвет текста на ней. Но эффект перехода применяется только к цвету фона кнопки, в результате чего смена цвета текста происходит мгновенно, в то время как цвет фона кнопки меняется постепенно.

Эту проблему можно решить двумя способами. При первом подходе свойству transition присваивается список переходов, разделенных запятыми:

Но этот код можно сократить, если нам нужно установить переход для всех изменяющихся свойств и при одинаковом времени перехода для них всех. В таком случае вместо списка свойств для перехода мы просто используем ключевое слово all:

На момент написания этих строк переходы поддерживались браузерами начиная с Opera 10.5 и Firefox 4, а также всеми версиями Safari и Chrome, с которыми вам когда-либо приходилось работать. Браузер Internet Explorer поддерживает переходы начиная с версии 10. Отсутствие поддержки переходов — не такая и большая проблема, как может показаться, т.к. браузер все равно меняет стили. Только эта смена происходит почти мгновенно, а не с растянутым во времени переходом. А это уже хорошая новость, т.к. веб-сайт может использовать переходы и в то же самое время сохранять основные визуальные стили для старых браузеров.

HTML:

<div class=»hover3d»>
<ul>
<li>
<div class=»data»>
<a href=»#link»>
<img src=»/photo-1.jpg»/>
</a>
<div class=»info»>
<h3>Название фотографии</h3>
<p>Описание фотографии.</p>
</div>
</div>
</li>
<!— … —>
<li>
<div class=»data»>
<a href=»#link»>
<img src=»/photo-12.jpg»/>
</a>
<div class=»info»>
<h3>Название фотографии</h3>
<p>Описание фотографии.</p>
</div>
</div>
</li>
</ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class=»hover3d»>

<ul>

<li>

<div class=»data»>

<a href=»#link»>

<img src=»/photo-1.jpg»/>

</a>

<div class=»info»>

<h3>Название фотографии</h3>

<p>Описание фотографии.</p>

</div>

</div>

</li>

<!— … —>

<li>

<div class=»data»>

<a href=»#link»>

<img src=»/photo-12.jpg»/>

</a>

<div class=»info»>

<h3>Название фотографии</h3>

<p>Описание фотографии.</p>

</div>

</div>

</li>

</ul>

</div>

CSS-эффект увеличения при наведении

Заказать звонок

Этот эффект при наведении создаётся аналогично предыдущему. Нам просто нужно присвоить нужному элементу на сайте класс «hover-effect2» и добавить в файл стилей style.css следующий код:

PHP

/**Эффект увеличения**/
.hover-effect2 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.hover-effect2:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**Эффект увеличения**/

.hover-effect2{

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}
 

.hover-effect2hover{

-webkit-transformscale(1.1);

-moz-transformscale(1.1);

-o-transformscale(1.1);

transformscale(1.1);

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

Для увеличения элемента мы используем CSS свойство transform: scale(1.1);

В скобочках указывается значение увеличения или уменьшения. 1 это размер 100%, если нам нужно увеличить элемент на 10% указываем в скобочках 1.1. Для увеличения на 20% указываем 1.2 и так далее. Для уменьшения на 10% пишем 0.9.

Это CSS-свойство, так же как и предыдущее указывается с кроссбраузерными префиксами.
Ну и, конечно же, везде добавляем CSS свойство transition для более плавной анимации.

Пример 3

В третьем примере мы будем использовать трансформации translate и rotate для вывода наших элементов описания:

.view-third img {
    transition: all 0.2s ease-in;
}
.view-third .mask {
	background-color: rgba(0,0,0,0.6);
	opacity: 0;
	transform: translate(460px, -100px) rotate(180deg);
	transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
	transform: translateY(-100px);
	transition: all 0.2s ease-in-out;
}
.view-third p {
	transform: translateX(300px) rotate(90deg);
	transition: all 0.2s ease-in-out;
}
.view-third a.info {
	transform: translateY(-200px);
	transition: all 0.2s ease-in-out;
}

Достаточно простые инструкции для получения эффекта.

.view-third:hover .mask {
	opacity:1;
	transition-delay: 0s;
	transform: translate(0px, 0px);
}
.view-third:hover h2 {
	transform: translateY(0px);
	transition-delay: 0.5s;
}
.view-third:hover p	{
        transform: translateX(0px) rotate(0deg);
	transition-delay: 0.4s;
}
.view-third:hover a.info {
	transform: translateY(0px);
	transition-delay: 0.3s;
}

Пример 4

В четвертом примере будет использоваться простое масштабирование изображения и содержания с использованием трансформации scale. Для изображения будет установлена задержка 0.2s в стилях, но при наведении курсора задержка будет 0s. Поэтому при наведении курсора мыши эффект проявится немедленно, а при убирании курсора мыши будет задержка.

.view-fourth img {
	transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
}
.view-fourth .mask {
	background-color: rgba(0,0,0,0.8);
	opacity: 0;
	transform: scale(0) rotate(-180deg);
	transition: all 0.4s ease-in;
    border-radius: 0px;
}
.view-fourth h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
	transition: all 0.5s ease-in-out;
}
.view-fourth p {
	opacity: 0;
	transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
    opacity: 0;
	transition: all 0.5s ease-in-out;
}

Простые инструкции для получения эффекта. CSS3 может все.

.view-fourth:hover .mask {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	transition-delay: 0.2s;
}
.view-fourth:hover img 	  {
	transform: scale(0);
    opacity: 0;
	transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

Порядок имеет значение

Хочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки:

  • Это добавление нового объявления по сравнению с исходным правилом .button — font-style ;
  • Переопределение существующего в классе .button стиля — background-color .

Переопределение дочерних селекторов в CSS происходит из-за порядка размещения правил .call-to-action и .button в таблице стилей. Когда в файле CSS есть два противоречащих друг другу свойства, всегда применяется то, которое указано последним. Если бы вы разместили .call-to-action перед .button , применялось бы это правило, и кнопка осталась бы синей.

Это означает, что порядок атрибутов класса в HTML-элементе не влияет на поведение переопределения. Несколько классов в одном элементе применяются « одинаково », а приоритет определяется исключительно порядком размещения правил в файле styles.css .

Другими словами, следующие элементы эквивалентны:

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: