Css плавное увеличение и уменьшение

Плавные трансформации на чистом 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) шагнул достаточно далеко. Что поделать, будущее уже наступило. И с его помощью теперь можно не только располагать элементы на странице и менять их цвет, но и применять в ним более интересные эффекты, что придает оформлению страницы совершенно другой вид. Некоторые из них мы сейчас рассмотрим.

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

В 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-анимацию без плагинов

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

Навигация по статье:

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

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

Так же нам понадобится правило @keyframes, внутри которого мы будем по шагам описывать начальное и конечное значение CSS-свойств анимируемого элемента, и так же можем задать его промежуточные значения для создания более плавных и интересных эффектов CSS-анимации.

Анимация плавного увеличение и исчезновение элемента

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

1. Для этого нам нужно будет добавить на свой сайт какое-либо изображение или блок с текстом, или любой другой элемент, и добавить для него определенный CSS-класс. В моем случае я добавляю для этого элемента класс animate-block.

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

В файле стилей нашей темы, или же просто в файле стилей сайта, указываем наш CSS-класс, а далее в фигурных скобочках указываем CSS-свойство animation.

Источник