Css задержка появления: html — Появление блока с задержкой (через время)

Как я могу задержать эффект :hover в CSS?

Есть ли способ задержать событие :Hover без использования JavaScript? Я знаю, что есть способ задержать анимацию, но я ничего не видел о задержке события :hover.

Я создаю меню типа son-of-suckerfish. Я хотел бы смоделировать то, что делает hoverIntent, не добавляя дополнительного веса JS. Я бы предпочел рассматривать это как прогрессивное улучшение и не делать JS обязательным требованием для использования меню.

Пример меню markup:

<div>
    <div>
        <ul>
            <li><a href="#">
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>
            <li>
        </ul>
    </div>
</div>

Вот полная демо-версия: http://jsfiddle.net/aEgV3/

css

hover

delay

Поделиться

Источник

Adam Youngers    

19 декабря 2011 в 19:01

3 ответа

• Как задержать событие jquery hover

  У меня есть меню с категориями, когда я навожу курсор на категорию, появляется выпадающий список (я уже отложил выпадающий список, чтобы он появился после 600 MS), Я хочу знать, как задержать событие наведения на категорию тоже для 600 MS, Каков наилучший и самый простой способ достичь этого с. ..

• Могу ли я остановить: hover от применения к элементу?

  Допустим, у меня есть CSS… button:hover { font-weight: bold } Как я могу предотвратить применение стилей :hover по своему желанию? Мой целевой вариант использования — это когда элемент отключен. Например, с этим HTML… <button disabled>Click me</button> … :hover CSS все еще…

164

Вы можете использовать переходы для задержки нужного эффекта :hover , если эффект основан на CSS.

Например

div{
    transition: 0s background-color;
}

div:hover{
    background-color:red;    
    transition-delay:1s;
}

это задержит применение эффектов наведения ( в данном случае background-color ) на одну секунду.

Демонстрация задержки как при наведении, так и при выключении:

div{
    display:inline-block;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    transition: 0s background-color;
    transition-delay:1s;
}
div:hover{
    background-color:red;
}

<div>delayed hover</div>

Демонстрация задержки только при наведении на:

div{
    display:inline-block;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    transition: 0s background-color;
}
div:hover{
    background-color:red;    
    transition-delay:1s;
}

<div>delayed hover</div>

Расширения для конкретных поставщиков для переходов и переходов W3C CSS3

Поделиться

Gabriele Petrioli    

19 декабря 2011 в 19:12

12

div {
     background: #dbdbdb;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    background:#5AC900;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

Это добавит задержку перехода, которая будет применима почти к каждому браузеру..

Поделиться

Shailesh kala    

28 сентября 2016 в 06:03

0

Для более эстетичного внешнего вида 🙂 может быть:

left:-9999em; 
top:-9999em; 

позиция для .sNv2 .nav UL может быть заменена на z-index:-1 и z-index:1 для .sNv2 .nav LI:Hover UL

Поделиться

Колян Чернышов    

20 марта 2014 в 13:34

Похожие вопросы:

Эффект задержки наведения на фон-размер в CSS

Интересно, есть ли способ задержать эффект наведения на размер фона, который идет от cover до contain? Я видел, что transition-delay работает на backround-color и других свойствах, но не на…

hover: как вызвать эффект UI один раз?

Как вызвать эффект jQuery-UI только один раз на mouseenter? http://jsfiddle.net/MG4JZ / $(‘#menu a’).hover( function() { $(this).css({ ‘background-color’: ‘white’, ‘color’: ‘black’,…

Могу ли я отключить эффект CSS: hover через JavaScript?

Я пытаюсь помешать браузеру использовать :hover эффект CSS, через JavaScript. Я установил стили a и a:hover в своем CSS, потому что мне нужен эффект наведения, если JS недоступен. Но если JS…

Как задержать событие jquery hover

У меня есть меню с категориями, когда я навожу курсор на категорию, появляется выпадающий список (я уже отложил выпадающий список, чтобы он появился после 600 MS), Я хочу знать, как задержать…

Могу ли я остановить: hover от применения к элементу?

Допустим, у меня есть CSS… button:hover { font-weight: bold } Как я могу предотвратить применение стилей :hover по своему желанию? Мой целевой вариант использования — это когда элемент отключен….

jQuery .hover эффект ‘color’ не работает должным образом

Я пытаюсь получить простой эффект наведения цвета jQuery для тегов. Вы можете в этом jsFiddle , что он не работает должным образом. Кроме того, как я получу смягчающий эффект? Спасибо….

Задержка CSS hover / mouseover эффект с JavaScript

Я нашел очень хороший скрипт галереи изображений, который использует только CSS здесь: http:/ / host.sonspring.com/hoverbox / Единственное, что удерживает меня от его использования, — это то, что…

Как вы можете удалить эффект CSS: hover с помощью jQuery?

Возможный Дубликат : Могу ли я отключить эффект CSS: hover через JavaScript? У меня есть выпадающее меню, которое отлично работает с псевдоклассом css .hover. Он отлично работает как на настольных…

Как задержать анимацию css в jQuery

Как я могу задержать свою анимацию в jQuery? Я пробовал использовать setTimeout, но это не работает. $(document).ready(function(){ $(‘button’).hover(function(){ window.setTimeout(function(){…

Как исправить .hover эффект прилипания

Когда я положил .hover на элемент это, и переместите курсор в сторону от элемента, эффект при наведении будет оставаться активированной. Я решил эту проблему с помощью mouseover и mouseleave., но…

Свойство transition-delay — задержка перед запуском плавного перехода transition

Свойство transition-delay устанавливает
задержку перед запуском плавного перехода
transition.

Данное свойство входит в свойство-сокращение
transition.

Синтаксис

селектор {
transition-delay: время в s или ms;
}

Значения

Значение по умолчанию: 0s.

Пример

Наведите мышкой на блок — 3 секунды
ничего не будет происходить (стоит задержка
3s), а затем он плавно изменит свою ширину
за 2 секунды. Если затем убрать мышь
— то снова 3 секунды ничего не будет
происходить, а затем ширина плавно уменьшится
до исходного значения:

<div></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
transition-delay: 3s;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}

:

Пример

Наведите мышкой на блок — он сначала изменит
свою ширину за 2 секунды, а потом
изменит свою высоту за 4 секунды.
Свойства будут меняться последовательно,
так как для высоты установлена в 3
секунды (время изменения ширины). Если убрать
мышь — то изменения произойдут в обратном
порядке: сначала уменьшится ширина, а потом
уменьшится высота:

<div></div>
#elem {
border: 1px solid black;
transition-duration: 2s, 4s;
transition-property: width, height;
transition-delay: 0s, 3s;
width: 100px;
height: 25px;
}
#elem:hover {
width: 400px;
height: 50px;
}

:

Смотрите также

• свойство transition-property,
  которое задает имя свойства для плавного перехода
• свойство transition-duration,
  которое задает длительность плавного перехода
• свойство transition-timing-function,
  которое задает временную функцию для плавного перехода
• свойство transition,
  которое является сокращением для плавного перехода
• свойство animation,
  с помощью которого можно сделать анимацию

CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>

<style>
.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0.2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

css — Цепочка анимаций CSS не учитывает задержку

Я создал две анимации: fadeIn и fadeOut. Я хочу, чтобы набор изображений постепенно исчезал, а затем изображения позади него постепенно усиливались. Однако я хочу, чтобы это повторялось бесконечно, чтобы одно всегда исчезало по мере появления другого.

.top-grid-container > div > picture {
    -webkit-animation-duration: 1s, 1s;
    animation-duration: 1s, 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeOut, fadeIn;
    animation-name: fadeOut, fadeIn;
    -webkit-animation-delay: 4s, 8s;
    animation-delay: 4s, 8s;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeIn, fadeOut;
    animation-name: fadeIn, fadeOut;
    -webkit-animation-delay: 4s, 8s;
    animation-delay: 4s, 8s;
}

@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}

@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}
@keyframes fadeOut{0%{opacity:1}to{opacity:0}}

<div>
  <div>
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>

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

Хорошо, теперь я обнаружил, что задержка не соблюдается для итерации, а только для первого вызова. Итак, я попытался «подделать», используя следующий код.

/* Animation */
.top-grid-container > div > picture {
    -webkit-animation-duration: 8s, 8s;
    animation-duration: 8s, 8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeOut, fadeIn;
    animation-name: fadeOut, fadeIn;
    -webkit-animation-delay: 0, 0;
    animation-delay: 0, 0;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeIn, fadeOut;
    animation-name: fadeIn, fadeOut;
    -webkit-animation-delay: 0, 0;
    animation-delay: 0, 0;
    -webkit-animation-duration: 4s, 4s;
    animation-duration: 4s, 4s;
}


@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    75% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    75% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

<div>
  <div>
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>

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

0

Eoin

20 Мар 2020 в 19:07

1 ответ

Лучший ответ

Свойство animation-delay обозначает задержку перед запуском анимации , а не задержку между каждой итерацией анимации .

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

.top-grid-container > div > picture {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeInAndOut;
    animation-name: fadeInAndOut;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeInAndOut;
    animation-name: fadeInAndOut;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

@-webkit-keyframes fadeInAndOut{0%{opacity:0} 40%{opacity:0} 50% {opacity:1} 90% {opacity:1} 100%{opacity:0}}
@keyframes fadeInAndOut{0%{opacity:0} 40%{opacity:0} 50% {opacity:1} 90% {opacity:1} 100%{opacity:0}}

<div>
  <div>
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>

2

Oddrigue
20 Мар 2020 в 16:22

ReactJS и CSS анимация: инструкция к применению

Перед каждой современной IT-компанией рано или поздно возникает задача анимации страниц. На дворе 21 век и по-другому никак. В зависимости от степени тривиальности задачи, мы всегда стараемся найти библиотеку (или решение), предоставляющую максимальный спектр возможностей.

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

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

1. CSS анимация

CSS transitions

Его основное отличие от классического CSS animations состоит в том, что он применяется для переходов. То есть анимируется один раз. Что это значит?

К примеру, мы указываем некоторое свойство, которое будет анимироваться с помощью специальных CSS-правил. При изменении этого свойства, браузер обработает анимацию, но только один раз. Если же нам надо анимировать определенное, вплоть до бесконечности, количество раз, на помощь приходит CSS animations. Здесь мы приведем небольшой стандартный пример. Более подробно вы можете ознакомиться с ним в этой статье.

Вообще возможность связывать анимации с использованием CSS transition можно посредством обработчика на событие transitionend. Но мы этого делать не рекомендуем, так как keyframes (css animation) намного проще в использовании.

Через transition-property мы указываем, какое свойство будет анимироваться. В нашем случае это background-color.

Далее transition-duration указывает на продолжительность анимации (3 секунды).

Теперь любое изменение фонового цвета у этого класса будет анимироваться в течение 3 секунд. Также заметим, что через ключевое слово transition можно указать через пробел все параметры по порядку. Их мы рассмотрим ниже.

Transition-property — здесь можно указать почти любое CSS свойство, например, margin-left, padding-right, opacity и т.д.

Transition-duration — продолжительность анимации, задается в s (секундах) или ms (миллисекундах).

Transition-delay — время задержки анимации.

Transition-timing-function — временнáя функция, определяющая как процесс анимации будет распределен во времени. Например, будет ли она постепенно ускоряться или замедляться. Самые популярные параметры: ease, ease-in, ease-out, ease-in-out. Также упомянем функцию steps (количество шагов[, start/end]), которая разбивает нашу анимацию на четкое количество шагов. Она используется в основном для исключения плавных переходов (пример: счетчик чисел).

Пример:

CSS animation

Заканчиваем с простыми анимациями и переходим к технологии CSS animation. Что она собой представляет и в чем ее отличия?

Сложные анимации создаются объединением простых с помощью CSS-правила @keyframes. В нем мы задаем «имя» анимации и правила: что, откуда и куда анимировать. Правило @keyframes содержит имя элемента, связывающее его с блоком объявления элемента. Keyframes кадры создаются с помощью ключевых слов “from” и “to” (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов. Их количество не ограничено: задавайте сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:

Если кадры 0% или 100% не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимированного свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменяет действие предыдущего.

Затем при помощи свойства animation: эта анимация подключается к элементу: задаются ее имя, время, дополнительные параметры и способ их применения.

Пример:

— (1) Имя анимации. Тут мы можем указать любое имя, соответствующее нашему имени в @keyframes. По сути оно будет обращаться туда. В приведенном примере мы указали все параметры в одну строчку. Для уточнения добавим: последний alternate указывает на то, что каждый раз анимация будет менять свое направление.

— (2) В @keyframes блоке мы указываем способ анимации. В данном случаем это будет смещение на определенное число пикселей.

Animate.css

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

Теперь о том, как они будут выглядеть на практике. Установка и подключение описывается на официальном сайте. Здесь же мы остановимся на кратком описании использования Animate.css.

Для ее применения к элементу (разумеется, после установки), должны быть добавлены два класса: animated и любой другой на выбор — именно он определяет какую анимацию мы используем. На JQuery это будет выглядеть примерно так:

Если вы хотите заточить анимацию “под себя”, можно настроить и другие параметры (время исполнения, задержка и т.д.).

Пример:

2. React анимация

Этот пункт будет интересен, в первую очередь, пользователям React. Откровенно говоря, сначала мы его недооценивали. В итоге же стандартная библиотека React существенно упростила нам жизнь.

Чем же она оказалась полезной? Ответим на этот вопрос небольшим обзором двух API для анимации.

ReactCSSTransitionGroup

Небольшой пример, как это выглядит:

Как видите, ReactCSSTransitionGroup оборачивает элемент, который мы собрались анимировать. В transitionName мы присваиваем имя нашей анимации.

Примечание! Распространенная ошибка: выносить ReactCSSTransitionGroup не в рендер самого компонента, а в отдельную функцию. Так оно не работает!

Пример:

Мы можем отлавливать жизненное состояние нашей анимации даже в стилях. Имеется в виду отслеживание того, на каком этапе она находится.

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

Далее (2) мы задаем начальное состояние для момента: когда элемент будет удален из DOM дерева и как именно будут меняться его стили перед удалением.

ReactTransitionGroup

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

Да, это очень похоже на методы жизненных циклов самого React. Здесь используется похожий подход. Перед вами методы из официальной документации:

componentWillAppear() — вызывается в том же время, что и componentDidMount(), при этом блокируя остальные анимации. Выполняется только при первичном рендере TransitionGroup.

componentDidAppear() — вызывается сразу после отработки componentWillAppear(). Вызов происходит с помощью callback функции, переданной в вызванный componentWillAppear().

componentWillEnter() — срабатывает в том же время, что и componentDidMount(), похожа на componentWillAppear(), но в отличии от него не вызывается при первичном рендере элемента.

componentDidEnter() — вызывается сразу после отработки componentWillEnter().

componentWillLeave() — вызывается в тот момент, когда элемент был удален из ReactTransitionGroup. Но он все еще будет виден, так как ReactTransitionGroup придержит его до вызова callback.

componentDidLeave() — вызов происходит сразу после отработки callback функции componentWillLeave(). Срабатывает в то же время, что и componentWillUnmount().

Предлагаем ознакомиться с примером, реализованном на одном из наших проектов.

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

Пока все просто: мы оборачиваем в TransitionGroup то, что анимируется. Чтобы это дало свой эффект и TransitionGroup мог отловить момент, когда наш child элемент появился или исчез из DOM дерева, нам следует поставить флаг (2) isOpenedMenuItemWorks.

Далее посмотрим на манипуляции, которые происходят в самом анимируемом компоненте FadeUpContainer.

Пример показывает, что все child компоненты, находящиеся внутри TransitionGroup, получают в свое пользование методы жизненного цикла для анимации. В данном случае методы componentWillEnter() и componentWillLeave().

В приведенном примере мы использовали библиотеку для анимации gsap. Очень рекомендуем ознакомиться с ее документацией. Эта библиотека позволяет решить массу проблем, связанных с анимацией. Главная особенность ее использования в том, что мы должны дать функции (здесь TweenMax) ссылку на анимируемый элемент.

Догадаться, какие параметры в функции TweenMax и за что отвечают совсем нетрудно. El ссылка на элемент, время исполнения, начальное состояние, конечное состояние + callback + время задержки.

3. Продвинутое использование библиотек для анимации при скроллинге

В этой части статьи мы расскажем о библиотеках, с которыми приходилось сталкиваться на практике. На сегодня — это WOW.js и AOS animate.

Между ними нет существенной концептуальной разницы. Обе анимируют при скроллинге. Обе используют для анимации готовые классы animate css. Но все же имеется и одно принципиальное отличие. В AOS можно определить свои классы для анимации, тогда как WOW использует только готовые animate.css классы. Именно поэтому мы решили сконцентрироваться на AOS  (в использовании WOW на него  очень похож).

Для того чтобы AOS заработал, его надо добавить глобально.

Пример:

В принципе все. Можно смело использовать.

А вот еще одна задача: анимация счетчика чисел в определенной части страницы при скроллинге.

Вывод

В заключение отметим, современные технологии предлагают широкий спектр решений для реализации анимаций. Остается лишь подобрать оптимальный вариант под поставленную задачу. Если вам нужна высокая производительность и максимальная гибкость, при отсутствии сложных требований — используйте CSS анимации. В случае сложных требований лучшим выбором станут javascript-based анимации. С ними вы можете реализовать практически любую задачу. Причем, с легкостью и без заметных потерь в производительности.

Если вам понравилась статья, не забудьте поделиться ею в социальных сетях. Всем хорошего дня!

Анимация элементов — amp.dev

Документация Руководства и учебники

Create your first Web Story

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

Чтобы применить начальную анимацию к элементу, следует указать атрибут animate-in="<animation preset>" с одним из значений пресетов анимации. Например, чтобы текст «упал» на страницу, добавьте в текстовый элемент атрибут animate-in="drop":

<amp-story-page>
  ...
  <amp-story-grid-layer template="vertical">
    <p animate-in="drop">Drop this text into the page</p>
</amp-story-page>

Опробуйте различные эффекты анимации, добавляя атрибут animate-in="<animation preset>" в элементы на страницах истории.

Время анимации

Каждый пресет анимации имеет встроенное значение по умолчанию для следующих параметров:

• delay: время задержки запуска анимации. Например, задержка в 0,3 секунды означает, что анимация запускается через 0,3 секунды после отображения страницы. Задержка в 0 с запускает анимацию сразу же.
• duration: количество времени, в течение которого выполняется анимация. Например, анимация плавного появления элемента занимает 500 мс от начала до конца.

Вы можете настроить время анимации, изменив задержку или продолжительность с помощью атрибутов animate-in-delay и animate-in-duration. В следующем примере my-element «влетает» в страницу слева через 0,3 секунды и завершает «влет» течение 0,5 секунды:

<amp-story-page>
  ...
  <p
   
    animate-in="fly-in-left"
    animate-in-delay="0.3s"
    animate-in-duration="0.5s"
  >
    I'm going to fly into the page from the left!
  </p>
</amp-story-page>

Анимируем нашу последнюю страницу

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

<amp-story-page>
  <amp-story-grid-layer template="vertical">
    <div>
      <amp-img
        src="assets/cat.jpg"
       
       
        layout="responsive"
      >
      </amp-img>
      <amp-img
        src="assets/dog.jpg"
       
       
        layout="responsive"
      >
      </amp-img>
      <amp-img
        src="assets/bird.jpg"
       
       
        layout="responsive"
      >
      </amp-img>
      <amp-img
        src="assets/rabbit.jpg"
       
       
        layout="responsive"
      >
      </amp-img>
    </div>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <p>Pets can lower your stress levels!</p>
  </amp-story-grid-layer>
</amp-story-page>

Перезагрузите AMP-историю в своем браузере и убедитесь, что страница отображается правильно и выглядит следующим образом:

Выглядит отлично, но статично! Давайте оживим ее.

Начнем с входной анимации текста баннера, чтобы он «влетал» на страницу справа. Добавьте в элемент <p> атрибут animate-in="whoosh-in-right"следующим образом:

<p animate-in="whoosh-in-right">
  Pets can lower your stress levels!
</p>

Перезагрузите страницу истории в браузере и убедитесь, что баннер «въезжает» на страницу.

Затем давайте сделаем так, чтобы все изображения постепенно проявлялись. Добавьте во все элементы amp-img атрибут animate-in="fade-in", чтобы код выглядел так:

<amp-img
  src="assets/cat.jpg"
 
 
  layout="responsive"
  animate-in="fade-in"
>
</amp-img>
<amp-img
  src="assets/dog.jpg"
 
 
  layout="responsive"
  animate-in="fade-in"
>
</amp-img>
<amp-img
  src="assets/bird.jpg"
 
 
  layout="responsive"
  animate-in="fade-in"
>
</amp-img>
<amp-img
  src="assets/rabbit.jpg"
 
 
  layout="responsive"
  animate-in="fade-in"
>
</amp-img>

Обновив и перезагрузив страницу, вы увидите, что изображения теперь отображаются с эффектом плавного появления. Это здорово, но эффект едва ли будет заметным, так как плавное появление всех изображений происходит одновременно! Мы можем сделать визуальный эффект более «эффектным», изменив скорость и время начала анимаций.

Давайте отложим появление первого изображения так, чтобы оно начиналось приблизительно к завершению «влета» текстового баннера — скажем, на отметке 0,4 с. Что касается остальных трех изображений, появление каждого из них мы будем начинать через 0,2 секунды после начала анимации появления предыдущего изображения. В каждый элемент amp-img добавьте атрибут animate-in-delay="" с соответствующим значением задержки. Ваш код должен выглядеть так:

<amp-img
  src="assets/cat.jpg"
 
 
  layout="responsive"
  animate-in="fade-in"
  animate-in-delay="0.4s"
>
</amp-img>
<amp-img
  src="assets/dog.jpg"
 
 
  layout="responsive"
  animate-in="fade-in"
  animate-in-delay="0.6s"
>
</amp-img>
<amp-img
  src="assets/bird.jpg"
 
 
  layout="responsive"
  animate-in="fade-in"
  animate-in-delay=".8s"
>
</amp-img>
<amp-img
  src="assets/rabbit.jpg"
 
 
  layout="responsive"
  animate-in="fade-in"
  animate-in-delay="1s"
>
</amp-img>

Обновите и перезагрузите свою историю. Ваша последняя страница должна выглядеть так:

Возможности анимации в веб-историях очень обширны (например, комбинирование анимаций, объединение анимаций в цепочку) и в этом уроке рассматриваются лишь поверхностно. Подробнее об анимации можно узнать в справочной документации по amp-story.

Возможности CSS3

Краткая запись свойства

transition

Запись всех свойств по отдельности — transition-property, transition-duration, transition-timing-function — может просто утомить. По этому, все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition

transition: transition-property transition-duration transition-timing-function transition-delay;
				

Это свойство связывает все другие свойства в одно. Нужно просто перечислить через запятую свойство, продолжительность, функцию распределения скорости по времени и задержку.

Если воспользоваться значениями по умолчанию, то запись

transition: 1s;
				

будет эквивалентна

transition: all 1s ease 0s;
				

Желательно чтобы список состоял из ключевого слова all или какого-нибудь одного CSS-свойства, а также из продолжительности, а функцию распределения скорости по времени и задержку можно не указывать. По умолчанию в качестве функции распределения задается ease-in, а задержка не используется. То есть, если нужно просто анимировать переход всех CSS-свойств на 1 секунду, нужно написать следующий код:

transition: all 1s;
				

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

transition: color 1s, background-color 1s, border-color .5s 1s;
					

CSS3 анимация

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

В CSS3 предоставляется еще один, более богатый свойствами механизм создания анимации.

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

Итак, переходы в CSS являются специфическим видом анимации, где:

• есть только два состояния: начало и конец;
• анимация не зациклена;
• промежуточные состояния управляются только функцией времени.

Но что если вы хотите:

• иметь контроль над промежуточными состояниями?
• зациклить анимацию?
• сделать разные виды анимаций для одного элемента?
• анимировать определённое свойство только на половину пути?
• имитировать различные функции времени для разных свойств?

Анимация в CSS позволяет всё это, и не только.

CSS3 анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.

Анимация в CSS3 сложнее перехода, но у нее есть дополнительное преимущество в том, что ей не нужен обязательный инициатор. Наряду с тем, что анимацию можно добавить к состоянию :hover для ее проигрывания при прохождении указателя мыши над элементом, запустить анимацию можно также при загрузке страницы.

При создании анимации первым делом создаются ключевые кадры (keyframes).

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

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

Создание анимации проходит в два приема.

1. Определение анимации. Включает определение ключевых кадров со списком
   анимируемых CSS-свойств.
2. Применение анимации к элементу. После определения анимации ее можно
   назначить любому количеству элементов страницы. Можно даже задать для
   каждого элемента разные распределения скорости выполнения, задержки и
   другие свойства анимации. То есть одну и ту же анимацию на странице можно
   использовать с немного разными настройками несколько раз.

Правило

@keyframes. Определение ключевых кадров

Перед применением анимации к элементам HTML, вам требуется написать анимацию с помощью ключевых кадров.

Создание анимации начинается с установки ключевых кадров правила @keyframes. Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.

@keyframes myAnimation {
    from {
        box-shadow: 2px 2px 10px rgba(0,0,0, 0.5);
    }
    
    to {
        box-shadow: 0px 0px 0px rgba(0,0,0, 1);
    }
}
				

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.

Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.

Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:

@keyframes move {
    from, to {
        top: 0;
        left: 0;
    }
    
    25%, 75% {
        top: 100%;
    }
	
    50% {
        top: 50%;
    }
}
				

animation-name

Когда определение набора ключевых кадров будет завершено, анимация будет готова к применению, и, чтобы заставить ее работать, ее нужно применить к какому-нибудь элементу страницы. Анимацию можно добавить к любому стилю любого элемента страницы.Если просто добавить анимацию к стилю,который тут же применяется к элементу, например к стилю тега h2, анимация будет применена при загрузке страницы.

Анимацию можно применить к одному из псевдоклассов, включая :hover, :active, :target или :focus, чтобы, например, запустить анимацию при проходе указателя мыши посетителя над ссылкой или при щелчке на поле формы.

И наконец, анимацию можно применить к стилю класса, и воспользоваться кодом JavaScript для динамического применения этого класса в ответ на щелчок посетителя на кнопке или на каком-нибудь другом элементе страницы.

В CSS3 предоставляется несколько свойств, связанных с анимацией и позволяющих управлять способом и временем проигрывания анимации (а также сокращенная версия, охватывающая все отдельные свойства). Как минимум, чтобы заставить анимацию выполняться, нужно указать имя, которое было дано исходной анимации (в правиле @keyframes), и продолжительность анимации.

@keyframes myFrame {
    from {  }
    
    to {  }
}

.selector {
    animation-name: myFrame;
}
				

Подобно именам классов CSS, название анимации может включать в себя только: буквы (a-z), цифры (0-9), подчёркивание (_), дефис (-). Название не может начинаться с цифры или с дефисов.

animation-duration

Свойство animation-name просто сообщает браузеру, какую анимацию нужно применить, а свойство animation-duration устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. Не наследуется. Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.

.selector {
    animation-duration: 10s;
}
				

Простой пример анимации →

Длительность анимации задается в секундах s или миллисекундах ms

animation-timing-function

Как и в случае с переходами, можно указывать функцию распределения скорости анимации по времени animation-timing-function, которая управляет этой скоростью на заданном времени продолжительности анимации.

Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2). Не наследуется.

Например, анимацию можно начинать медленно и завершать быстро, используя для этого кубическую кривую Безье или одно из встроенных ключевых слов, определяющих метод: linear, ease, ease-in, ease-out, ease-in-out. Все это работает точно так же, как и в ранее рассмотренном случае с переходами.

Но так же доступны и следующие временые функции:

• step-start — задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Эквивалентно steps(1, start).
• step-end — пошаговая анимация, изменения происходят в конце каждого шага. Эквивалентно steps(1, end).
• steps(количество шагов,start|end) Ступенчатая временная функция, которая принимает два параметра. Количество шагов задается целым положительным числом. Второй параметр необязательный, указывает момент, в котором начинается анимация. Со значением start анимация начинается в начале каждого шага, со значением end — в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end.

Пример анимации с использованием функции steps →

animation-iteration-count

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

Переходы являются анимациями, выполняемыми однократно, например указатель мыши проходит над кнопкой и она увеличивается в размерах. А вот анимации благодаря свойству animation-iteration-count могут запускаться один, два и более раза или непрерывно.

.selector {
    animation-iteration-count: 3;
}
				

Свойство animation-iteration-count позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.

С помощью целого числа задается количество повторов анимации. Значение по умолчанию 1. Дробные значения больше 1 будут воспроизводить анимацию, обрезая её на части следующей итерации.

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

animation-direction

Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.

Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.

normal — Значение по умолчанию, анимация проигрывается в обычном направлении, с начала и до конца.

reverse — Анимация проигрывается с конца.

alternate — Анимация проигрывается с начала до конца, затем в обратном направлении.

alternate-reverse — Анимация проигрывается с конца до начала, затем в обратном направлении.

Краткая запись

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation, перечислив их через пробел:

animation: animation-name 
           animation-duration 
           animation-timing-function 
           animation-delay 
           animation-iteration-count 
           animation-direction;

				

Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration, остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay.

Множественные анимации

Можно задавать несколько анимаций, перечислив их названия через запятую:

animation: move .3s, back 4s steps(10, start) infinite;

				

javascript — Как я могу добавить задержку в мои div, чтобы они появлялись один за другим, как слайд PowerPoint?

Закрыт . Этот вопрос должен быть более конкретным. В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав это сообщение.

Закрыт 7 лет назад.

Итак, скажем, я хочу, чтобы div 1 появился через 2 секунды, div 2 появился через 7 секунд, а div 3 появился через 15 секунд.

Есть ли способ добавить встроенный элемент стиля, который заставит div-ы перейти из скрытых, но занимающих пространство, в полностью видимые.

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

Спасибо.

Edit: Чтобы сделать это более понятным, я ищу любой код, который имеет временную задержку для появления. Когда я ищу переход, я получаю кучу кода, основанного на действиях, таких как щелчок или наведение. Я не ищу действия пользователя, чтобы вызвать это, просто время.

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

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

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

CSS transition-delay Свойство

Пример

Подождите 2 секунды, прежде чем начнется эффект перехода:

div {
задержка перехода: 2 с;
}

Попробуй сам »

Определение и использование

Свойство transition-delay указывает, когда начнется эффект перехода.

Значение задержки перехода определяется в секундах (с) или миллисекундах (мс).

Поддержка браузера

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

Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.

Синтаксис CSS

задержка перехода: время | начальное | наследование;

Значения собственности

связанные страницы

Учебник

CSS: переходы CSS

Ссылка на HTML DOM: свойство transitionDelay

CSS animation-delay Свойство

Пример

Начать анимацию через 2 секунды:

div {
задержка анимации: 2 с;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство animation-delay определяет задержку начала анимации.

Значение задержки анимации определяется в секундах (с) или миллисекундах (мс).

Поддержка браузера

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

Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.

Синтаксис CSS

задержка анимации: время | начальное | наследование;

Значения собственности

Другие примеры

Пример

Использование отрицательных значений.Здесь анимация начнется, как если бы она уже была
играл 2 секунды:

div {
задержка анимации: -2 с;
}

Попробуй сам »

связанные страницы

Учебник

CSS: Анимация CSS

Ссылка на HTML DOM: свойство animationDelay

transition-delay — CSS: Cascading Style Sheets

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

Задержка может быть нулевой, положительной или отрицательной:

• Значение 0 с (или 0 мс ) немедленно запустит эффект перехода.
• Положительное значение задержит начало эффекта перехода на заданный промежуток времени.
• Отрицательное значение приведет к немедленному запуску эффекта перехода и в середине эффекта. Другими словами, эффект будет анимирован так, как если бы он уже был запущен в течение заданного промежутка времени.

Вы можете указать несколько задержек, что полезно при переходе нескольких свойств. Каждая задержка будет применяться к соответствующему свойству, как указано в свойстве transition-property , которое действует как главный список. Если указано меньше задержек, чем в главном списке, список значений задержки будет повторяться, пока их не будет достаточно. Если задержек больше, список значений задержки будет усечен, чтобы соответствовать количеству свойств. В обоих случаях объявление CSS остается в силе.

 
задержка перехода: 3 с;
задержка перехода: 2 с, 4 мс;


задержка перехода: наследование;
задержка перехода: начальная;
задержка перехода: вернуться;
задержка перехода: не задано;
  

Значения

<время>

Обозначает время ожидания между изменением значения свойства и началом эффекта перехода.

Пример, показывающий различные задержки

HTML

  
 0.5 секунд 

  
 2 секунды 

  
 4 секунды 

   Изменить 
  

CSS

  .box {
  маржа: 20 пикселей;
  отступ: 10 пикселей;
  дисплей: встроенный блок;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  размер шрифта: 18 пикселей;
  свойство-перехода: цвет фона размер шрифта цвет преобразования;
  временная функция перехода: легкость входа-выхода;
  продолжительность перехода: 3 с;
}

.transformed-state {
  преобразовать: повернуть (270 градусов);
  цвет фона: синий;
  цвет: желтый;
  размер шрифта: 12 пикселей;
  свойство-перехода: цвет фона размер шрифта цвет преобразования;
  временная функция перехода: легкость входа-выхода;
  продолжительность перехода: 3 с;
}

.delay-1 {
  задержка перехода: 0,5 с;
}

.delay-2 {
  задержка перехода: 2 с;
}

.delay-3 {
  задержка перехода: 4 с;
}
  

JavaScript

  изменение функции () {
  const elements = document.querySelectorAll ("div.box");
  for (let element of elements) {
    element.classList.toggle ("преобразованное состояние");
  }
}

const changeButton = document.querySelector ("# изменение");
changeButton.addEventListener («щелкнуть», изменить);
  

Результат

Таблицы BCD загружаются только в браузере

animation-delay — CSS: Cascading Style Sheets

Свойство CSS animation-delay Свойство CSS определяет время ожидания от применения анимации к элементу перед началом для выполнения анимации.Анимация может начаться позже, сразу с самого начала или сразу и частично в процессе анимации.

Часто удобно использовать сокращенное свойство animation для одновременной установки всех свойств анимации.

 
задержка анимации: 3 с;
задержка анимации: 0 с;
задержка анимации: -1500 мс;


анимация-задержка: 2,1 с, 480 мс;


задержка анимации: наследование;
анимация-задержка: начальная;
анимация задержки: вернуться;
анимация-задержка: не установлено;
  

Значения

<время>

Временное смещение с момента применения анимации к элементу, с которого анимация должна начаться.Это может быть указано в секундах ( с ) или в миллисекундах ( мс ). Единица обязательна.

Положительное значение указывает, что анимация должна начаться по истечении заданного времени. Значение 0 с , которое является значением по умолчанию, указывает, что анимация должна начаться сразу после ее применения.

Отрицательное значение заставляет анимацию начинаться немедленно, но в середине цикла. Например, если вы укажете -1s в качестве времени задержки анимации, анимация начнется немедленно, но начнется через 1 секунду последовательности анимации.Если вы указываете отрицательное значение для задержки анимации, но начальное значение неявно, начальное значение берется с момента применения анимации к элементу.

Примечание: Когда вы указываете несколько значений, разделенных запятыми, в свойстве animation- * , они будут назначены анимациям, указанным в свойстве animation-name , по-разному в зависимости от их количества. Для получения дополнительной информации см. Установка нескольких значений свойств анимации.

Анимация с задержкой 2 секунды

HTML

CSS

  .box {
  цвет фона: rebeccapurple;
  радиус границы: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  имя-анимации: повернуть;
  продолжительность анимации: 0,7 с;
  задержка анимации: 2 с;
}

@keyframes rotate {
  0% {
    преобразовать: повернуть (0);
  }
  100% {
    преобразовать: повернуть (360 градусов);
  }
}
  

См. Примеры анимации CSS.

Таблицы BCD загружаются только в браузере

Псевдоэлементы — CSS: Каскадные таблицы стилей

Псевдоэлемент CSS — это ключевое слово, добавляемое в селектор, который позволяет вам стилизовать определенную часть выбранных элементов .Например, :: first-line можно использовать для изменения шрифта первой строки абзаца.

 
p :: first-line {
  цвет синий;
  преобразование текста: прописные буквы;
}
  

Примечание: В отличие от псевдоэлементов, псевдоклассы могут использоваться для стилизации элемента на основе его состояния .

  selector :: псевдоэлемент {
  стоимость имущества;
}
  

В селекторе можно использовать только один псевдоэлемент.Он должен стоять после простых селекторов в операторе.

Примечание: Как правило, следует использовать двойные двоеточия ( :: ) вместо одинарного двоеточия (: ). Это отличает псевдоклассы от псевдоэлементов. Однако, поскольку это различие не присутствовало в более старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для исходных псевдоэлементов.

Псевдоэлементы, определенные набором спецификаций CSS, включают следующее:

А

Б

С

F

г

м

П

S

т

Эффекты появления / исчезновения с помощью CSS: `opacity` + CSS-delayed` visibility`

Эффекты постепенного появления / исчезновения с помощью CSS: `opacity` + CSS-delayed` visibility`

Вернуться на вступительную страницу

Это похоже на наш предыдущий тест, за исключением того, что на этот раз мы пытаемся отложить применение `visibility: hidden`, используя чистый CSS.Мы можем сделать это с помощью свойства «transition-delay» и применить различную задержку к переходу непрозрачности (без задержки) и к переходу видимости (задержка, равная длительности перехода непрозрачности). Спасибо Роману Комарову за указание на эту технику.

Показать элемент
Скрыть элемент

Фиктивное содержание: никакая живая правда не может быть сведена к приговору; таким предложением в лучшем случае был бы паспорт, дающий право на въезд в другую страну, которую вам еще предстоит узнать.И вы в конечном итоге думаете, что можете решать важные дела только окольными путями или по диагонали — почти потихоньку.

Тестовая ссылка после скрытого содержимого.

Как это работает

Базовый код CSS для этого примера выглядит так:

  .visible {
  видимость: видимая;
  непрозрачность: 1;
  переход: непрозрачность 2 с, линейная;
}
.скрытый {
  видимость: скрыта;
  непрозрачность: 0;
  переход: видимость 0 с 2 с, непрозрачность 2 с линейная;
}
  

При отображении элемента (путем переключения на класс visible ) мы хотим, чтобы свойство visibility: visible активировалось мгновенно, поэтому можно перейти только к свойству непрозрачности и .И при скрытии элемента (путем переключения на класс hidden ) мы хотим отложить объявление visibility: hidden , чтобы мы могли сначала увидеть переход постепенного исчезновения. Мы делаем это, объявляя переход для свойства visibility с длительностью 0 секунд и задержкой.

Как удалить скрытый элемент из потока?

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

• display: none не работает, потому что применяется мгновенно, и попытка отложить его, как мы делали с видимостью , не сработает;
• позиция: абсолютный имеет ту же проблему;
• это не идеально, но мы можем использовать margin-top (это может быть перенесено и, следовательно, отложено).

Чтобы использовать margin-top для скрытия элемента, нам нужна немного более богатая структура HTML:

  

  
… 

  

И наш код CSS становится более сложным:

 .видимый,
.скрытый {
  переполнение: скрыто;
  / * Этот контейнер не должен иметь отступов, границ и т. Д. * /
}
.visible {
  видимость: видимая;
  непрозрачность: 1;
  переход: непрозрачность 2 с, линейная;
}
.скрытый {
  видимость: скрыта;
  непрозрачность: 0;
  переход: видимость 0 с 2 с, непрозрачность 2 с линейная;
}
.visible> div,
.hidden> div {
  / * Поместите сюда любые отступы, границы, минимальную высоту и т. Д. * /
}
.hidden> div {
  margin-top: -10000 пикселей;
  переход: margin-top 0s 2s;
}
  

.