Плавное уменьшение блока css

Плавность и анимация в CSS

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

• Плавное изменение цвета
• Плавное затухание
• Плавное увеличение — уменьшение
• Плавное перемещение
• Плавный поворот

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

Плавное изменение цвета

Для примера создадим HTML документ и поместим в него блок div

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

#block1{ width:150px; /* Ширина */ height:150px; /* Высота */ background:#234543; /* Цвет */ margin:100px auto; /* Отступы */ border-radius:8px; /* Радиус углов */ -o-border-radius:8px; /* для Оперы */ -webkit-border-radius:8px; /* Хром и Сафари */ -moz-border-radius:8px; /* Мозилла */ -webkit-transition: background-color 1s linear; -o-transition: background-color 1s linear; -moz-transition: background-color 1s linear; transition: background-color 1s linear; } #block1:hover{background:#00CC66;} /* Цвет блока при наведении */

Плавное изменение цвета происходит за счет применения свойства transition, что в переводе означает переход или превращение. И это превращение происходит за 1 секунду, как указано в значении. Linear можно поменять на ease и переход будет чуть быстрее. Смотрим пример.

Плавное затухание

CSS код пишем примерно тот же самый, только свойство указываем — all, то есть ко всему, что последует после псевдокласса hover, будет применена плавность. В нашем случае это затухание. Блок изменит прозрачность при наведении на 50%.

-webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; #block1:hover{opacity:0.4;}

-webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; #block1:hover

Плавное увеличение

Здесь все то же самое. Только в примере я установил значение linear вместо ease. Устанавливаем в псевдоклассе hover ширину и высоту, отличную от оригинального размера.

Плавное перемещение

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

#block1:hover{ -webkit-transform: translate(50px,0); -moz-transform: translate(50px,0); -o-transform: translate(50px,0); transform: translate(50px,0); }

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

Плавный поворот

#block1:hover{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }

Это означает, что объект будет повернут на 180° по часовой стрелке

Вернемся к теме о браузерах. Opera, Mozilla, Chrome прекрасно поддерживают все эти новшества, но Internet Explorer как обычно живет своей жизнью и никуда не спешит. У него и так все хорошо. 🙂 То есть все, о чем я писал выше, он просто не понимает. Вот такие дела. Скачайте исходники и изучите код более подробно.

Источник

Плавные трансформации на чистом CSS. Свойство transition

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

Свойство в общем виде записывается так:

transition: property duration timing-function delay; 

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all , переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear , ease , ease-in , ease-out , ease-in-out .
• delay — время задержки перед началом перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).

Примеры использования

В данном примере применяем плавный переход цвета фона ( background-color ) для элемента p при наведении курсора. Фон плавно изменится за секунду.

👉 Если вы не понимаете, что написано в этом примере кода и откуда там p , прочитайте статью про селекторы.

В этом примере применяем переход для двух свойств ( width и height ) одновременно. При наведении курсора размеры элемента p плавно увеличиваются.

Анимировать изменение цвета текста при наведении на ссылку.

Изменение размера шрифта при наведении на текст:

Нюансы

☹️ Не все свойства возможно анимировать. Для корректной работы перехода изменяемое свойство должно быть анимируемым. Например:

• Цветовые свойства: color , background-color , border-color и другие.
• Размеры и отступы: width , height , padding , margin , top , right , bottom , left и другие.
• Свойства трансформации: transform (включая rotate , scale , translate , skew и другие).
• Некоторые свойства текста: font-size , letter-spacing , word-spacing , line-height .
• Свойство прозрачности: opacity .
• Свойства границы: border-width , border-radius .
• Свойство позиционирования: position .

❌ Не все CSS-свойства могут быть анимированы. Например, свойства display , content , visibility и некоторые другие не поддерживают анимацию.

Переходы не работают при изменении свойств с помощью JavaScript. В этом случае лучше использовать CSS-анимации или JavaScript-анимации.

Если вам нужна более сложная анимация или нужно анимировать изменение свойств, которые не поддерживают переходы, вы можете использовать CSS-анимации с помощью свойств @keyframes и animation .

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

Свойство transition хорошо поддерживается всеми современными браузерами. Для детальной информации рекомендуется обратиться к сайту caniuse.

Материалы по теме

• Тренажёры по CSS-анимациям от HTML Academy.
• : hover, : focus, : active — как работают состояния элементов.
• Функции плавности — подборка функций плавности от Андрея Ситника и Ивана Соловьева.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Плавное изменение высоты блока на CSS

Рассмотрим способ решения проблемы сворачивания и разворачивания блока неизвестной высоты на чистом CSS. Это распространённая задача, которая часто вызывает трудности в реализации, когда значение свойства «height» не задано явно, а находится в состоянии «auto».

Для начала посмотрите как работает решение на практике:

Принцип работы

Обычная реализация подразумевает знание начальной и конечной высоты блока. Чтобы обойти это ограничение, будем использовать свойство «max-height». Для свёрнутого значения оно будет нулевым, а для открытого — максимально большим. В нашем случае точно хватит 1000 пикселей.

Стиль блока в раскрытом состоянии:

Свёрнутое состояние будет происходить за счёт добавления класса «expansion-hide».

• В развёрнутом виде у «DIV» будет класс «expansion-body».
• В свёрнутом — «expansion-body expansion-hide».

Плавное сворачивание и разворачивание достигается с помощью нелинейной трансформации максимальной высоты. Значение от 1000 до 0 меняется сначала очень быстро, а потом резко замедляется. Это сглаживает анимацию, если высота блока намного меньше 1000 пикселей. При обычной линейной трансформации при сворачивании была бы задержка.

Описанный способ легко адаптируется для плавного изменения ширины путём применения свойства «max-width».

Добавление класса и возможные проблемы

Для добавления и удаления класса «expansion-hide» в примере использовался чистый JS. Он не влияет на сам процесс анимации. В обработчике «onclick» всего одна строка кода.

document.getElementById('expansion-body').classList.toggle('expansion-hide')

Сама html-разметка также проста:

Небольшое предупреждение — не добавляйте к блоку отступы «padding», иначе он не будет до конца закрываться. Если они нужны, то создайте внутри ещё один «div» и добавляйте произвольные стили к нему.

PS Чтобы поблагодарить за решение напишите любой комментарий.

Источник