Css transition плавное появление блока

ЗаголовокDwweb.ru

У нас есть основной блок. Который с позиционирован абсолютно(position: absolute;), вы его положения видите после загрузки страницы.

Нас прежде всего интересует:

Механизм работы плавно появляющегося блока:

У нас есть два блока( «h1» и «.begin»), для них будут прописаны свойство появление слева.

И блок между ними, который будет поваляться слева это абзац «

«.

Для блоков слева выставляем

keyframes для левого блока:

keyframes для правого го блока:

Про остальные стили не вижу никакого смысла писать.

Результат плавного появления блока на примере + скачать

Плавное появление блока.

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

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

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

Убираем все отступы наружные и внутренние :

Скроем колесо прокрутки, если она вдруг появится.

Позиционируем, растягиваем, заполняем.

#img <
position: absolute;
background: url(onload.jpg) center no-repeat;
width: 100%;
height: 100%;
background-size: cover;
/*Устанавливаем время и имя анимации*/
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
>

Добавляем keyframes, от полной невидимости(opacity: 0;) до полной видимости(opacity: 1;)

Не забываем по блок, который будет у нас появляться

Собираем все вместе и получаем блок появляющийся постепенно:

Локальное плавное появление блока.

Если вам нужен простой код плавного появления блока, то следующий пункт про такой блок.

Как сделать плавное появление блока css

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

Здесь по-моему и объяснять нечего… код намного меньше и проще!

Источник

CSS3 transition прозрачности и видимость блока :: Хранитель заметок

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

Устанавливать свойство display: none нельзя потому, что тогда перестанет работать анимация . В этом случае поможет смена значения у свойства visibility . Его, на ряду с другими свойствами, указываем в transition.

 .tooltip < opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; >.widget:hover .tooltip

При «затухании» блока значение visibility: hidden применится с задержкой равной длительности анимации прозрачности. Без задержки блок будет скрыт мгновенно. Для фазы «появления» блока такой задержки наоборот не нужно. Блок должен получить видимость сразу и только после этого у него будет меняться прозрачность.

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

PS: Разумеется, названия CSS3 свойств transition и transition-delay нужно указывать с браузерными префиксами.

Ещё заметки со схожей тематикой

Категории

Коментарии к заметке

@mista_k если я правильно понял задачу то тут поможет так же pointer-events: none; но кроссбраузерности будет конечно меньше. — CyberAP (@CyberAP) January 7, 2014

Можно (с известными ограничениями http://caniuse.com/#search=pointer-events). Для pointer-events больше годятся задачи типа «белого градиента, накрывающего текст».

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

Это легко исправляется как раз выше названным свойством pointer-events . Вот ещё один пример с новой улучшенной кнопкой, тултип которой не страдает от «дрожания» указателя рядом с его нижним краем: В стили добавил два правила:

 .widget_fixed .tooltip < pointer-events: none; >.widget_fixed:hover .tooltip

Если использовать pointer-events , то не получится перейти курсором в этот tooltip (чтобы выделить текст или перейти по ссылке в самом тултипе, например), но если этого и не требуется, то такого же эффекта со значительно большей поддержкой можно достичь, используя другую разметку и селектор + (http://caniuse.com/#feat=css-sel2) http://jsfiddle.net/65xm7/1/

Так pointer-events: none назначается только в фазе «затухания». Предполагается, что с блоком в этот момент уже нельзя никак взаимодействовать, что выглядит вполне логично. Спасибо за пример. Он, разумеется, проще и надёжнее, но имеет совсем другое поведение.

Источник

transition

Свойство transition используется, когда нам нужно плавно изменить CSS-свойства между двумя состояниями элемента. Например, при наведении мышкой.

Пример

Скопировать ссылку «Пример» Скопировано

Подробно

Скопировать ссылку «Подробно» Скопировано

Свойство transition это шорткат. Как, например, margin или background . Оно включает в себя несколько подсвойств:

• transition — property — указываем свойство, которое хотим плавно изменить;
• transition — duration — длительность перехода;
• transition — timing — function — функция, описывающая скорость изменения свойства;
• transition — delay — задержка перед началом изменения.

Как записывается

Скопировать ссылку «Как записывается» Скопировано

Применить к одному свойству:

 .selector  transition: transform 4s;> .selector  transition: transform 4s; >    Скопировать Скопировано Не удалось скопировать   

 .selector  transition: transform 4s 1s;> .selector  transition: transform 4s 1s; >    Скопировать Скопировано Не удалось скопировать   

 .selector  transition: transform 4s ease-in-out 1s;> .selector  transition: transform 4s ease-in-out 1s; >    Скопировать Скопировано Не удалось скопировать   

Применить к двум свойствам:

 .selector  transition: transform 4s, color 1s;> .selector  transition: transform 4s, color 1s; >    Скопировать Скопировано Не удалось скопировать   

Применить ко всем свойствам, которые будут меняться:

 .selector  transition: all 0.5s ease-out;> .selector  transition: all 0.5s ease-out; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

 Кнопка button class="button">Кнопкаbutton>    Скопировать Скопировано Не удалось скопировать   

Тогда можно сказать, что у кнопки есть два состояния:

1. Базовое состояние, когда мышка не над кнопкой.
2. Состояние при наведении курсора мыши (ховер-состояние).

Стили для двух этих состояний могут быть записаны в CSS вот так 👇

Стили для базового состояния:

 .button  background-color: blue;> .button  background-color: blue; >    Скопировать Скопировано Не удалось скопировать   

 .button:hover  background-color: white;> .button:hover  background-color: white; >    Скопировать Скопировано Не удалось скопировать   

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

Стили для базового состояния:

 .button  background-color: blue; transition: background-color 0.6s;> .button  background-color: blue; transition: background-color 0.6s; >    Скопировать Скопировано Не удалось скопировать   

 .button:hover  background-color: white;> .button:hover  background-color: white; >    Скопировать Скопировано Не удалось скопировать   

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

Стили для базового состояния:

 .button  background-color: pink; transition: background-color 0.6s, transform 0.5s;> .button  background-color: pink; transition: background-color 0.6s, transform 0.5s; >    Скопировать Скопировано Не удалось скопировать   

 .button:hover  background-color: white; transform: scale(110%);> .button:hover  background-color: white; transform: scale(110%); >    Скопировать Скопировано Не удалось скопировать   

Не забывай о том, что вместе с изменяемым свойством обязательно должна указываться длительность изменения ( .5s ).

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Обратите внимание, что свойство transition мы задали в стилях для базового состояния. Таким образом, мы заранее говорим браузеру, какое свойство должно изменяться плавно.

💡 С помощью transition можно плавно изменять любое свойство, у которого значение записывается с помощью чисел (например, margin ). Исключения: visibility , z — index .

💡 По возможности старайтесь не использовать слово all для описания перехода ( transition : all . 3s ). Да, это проще на первоначальном этапе, но позже из-за этого в какой-то момент могут начать плавно изменяться свойства, которые не должны этого делать. Ну и вообще, когда браузер встречает слово all , он начинает перебирать каждое свойство элемента в поисках необходимого. Это ненужная нагрузка.

💡 Старайтесь использовать для анимации в первую очередь свойства transform и opacity — они самые производительные, потому что не приводят к перезапуску процессов Layout и Paint. Изменяйте свойства left , top , inset , margin , padding , width , inline — size , height , block — size и прочие с осторожностью, только когда без этого никак не обойтись.

Особенности

Скопировать ссылку «Особенности» Скопировано

💡 Вторым состоянием необязательно должно быть состояние при наведении. Это может быть состояние :focus , :active , :checked или, например, появление дополнительного класса.

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

Стили для базового состояния:

 .button  background-color: pink; transition: background-color 0.3s, transform 0.2s;> .button  background-color: pink; transition: background-color 0.3s, transform 0.2s; >    Скопировать Скопировано Не удалось скопировать   

 .button:hover  background-color: white; transform: scale(110%); transition: background-color 3s, transform 2.5s;> .button:hover  background-color: white; transform: scale(110%); transition: background-color 3s, transform 2.5s; >    Скопировать Скопировано Не удалось скопировать   

Обратите внимание, в этом случае свойство transition задаётся для обоих состояний.

💡 Длительность перехода может задаваться в секундах ( 0 . 3s ) или в миллисекундах ( 300ms ). Ноль перед точкой можно не писать ( .3s ).

💡 Значение свойства z — index записывается числом, но его нельзя плавно изменить никаким способом.

💡 Значение свойства visibility записывается строкой, но его в связке с opacity можно плавно изменять при помощи transition .

💡 Кроме использования для изменения внешнего вида элемента, transition прекрасно подходит для решения задач с появлением элементов. Например, при реализации тултипов или всплывающих меню:

   
Fade in  Наведи на меня 
Эта подсказка проявилась    
Slide up  Наведи на меня 
Это подсказка, которая всплыла   div> h2>Fade inh2> div class="tooltip-cnt"> span class="tooltip-target">Наведи на меняspan> div class="tooltip">Эта подсказка проявиласьdiv> div> div> div class="transitioned"> h2>Slide uph2> div class="tooltip-cnt"> span class="tooltip-target">Наведи на меняspan> div class="tooltip">Это подсказка, которая всплылаdiv> div> div>    Скопировать Скопировано Не удалось скопировать   

 .tooltip-cnt  position: relative;> .tooltip  position: absolute; /* Описываем переход */ transition: opacity 0.4s, visibility 0.4s, transform 0.4s; /* Прячем элемент */ opacity: 0; visibility: hidden;> .transitioned .tooltip  /* Второй тултип еще опускаем вниз */ transform: translateY(20px);> .tooltip-target:hover + .tooltip  opacity: 1; visibility: visible;> .transitioned .tooltip-target:hover + .tooltip  /* Поднимаем второй тултип обратно вверх при появлении */ transform: translateY(0);> .tooltip-cnt  position: relative; > .tooltip  position: absolute; /* Описываем переход */ transition: opacity 0.4s, visibility 0.4s, transform 0.4s; /* Прячем элемент */ opacity: 0; visibility: hidden; > .transitioned .tooltip  /* Второй тултип еще опускаем вниз */ transform: translateY(20px); > .tooltip-target:hover + .tooltip  opacity: 1; visibility: visible; > .transitioned .tooltip-target:hover + .tooltip  /* Поднимаем второй тултип обратно вверх при появлении */ transform: translateY(0); >    Скопировать Скопировано Не удалось скопировать   

Обратите внимание, что мы прописали visibility как одно из свойств, которое нужно плавно изменить. Это работает в связке с opacity и обеспечивает возможность плавного появления и скрытия элемента:

 .tooltip  transition: opacity 0.4s, visibility 0.4s;> .tooltip  transition: opacity 0.4s, visibility 0.4s; >    Скопировать Скопировано Не удалось скопировать   

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

Если использовать только visibility , то скрытие и появление не будет плавным.

Источник