Ноябрь 4, 2019 Запись была обновлена
CSS3 анимация для начинающих
CSS3 анимация достаточно широко используется. Пришла пора разобраться даже самым начинающих сайтостроителям что же такое CSS анимация и как ее создать. Возможно Вы думаете что CSS3 анимация заключается в том, чтобы заставить двигаться блоки и это похоже на мультфильм. Но CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации. Чтобы это было понятно даже для начинающих — я расписал всё по шагам.
1. Основные свойства CSS3 анимации
Небольшой теоретический блок, из которого Вы поймете какие свойства CSS3 отвечают за анимацию, а также какие значения они могут принимать.
- animation-name — уникальное имя анимации (ключевых кадров, о них поговорим чуть ниже).
- animation-duration — длительность анимации в секундах.
- animation-timing-function — кривая изменения скорости анимации. На первый взгляд очень непонятно. Всегда легче показать на примере, а их Вы увидите ниже. Может принимать следующие значения: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n).
- animation-delay — задержка в секундах перед началом анимации.
- animation-iteration-count — количество повторов анимации. Задается либо просто числом, либо можно указать infinite и анимация будет выполняться бесконечно.
Здесь находятся лишь основные свойства, которых более чем достаточно, чтобы создать свою первую анимацию на CSS3.
Последнее, что нам нужно знать и понимать из теории — это то, как создавать ключевые кадры. Это делать также легко и делается это с помощью правила @keyframes, внутри которого указываются ключевые кадры. Синтаксис этого правила следующий:
1 2 3 4 | @keyframes AnimationSitehere { from {/*свойства для начального ключевого кадра*/} to {/*свойства для конечного ключевого кадра*/} } |
Выше мы задали первый и последний кадр. Все промежуточные состояния рассчитаются АВТОМАТИЧЕСКИ!
2. Реальный пример анимации CSS3
Теория как обычно скучна и не всегда понятна. Намного проще увидеть всё на реальном примере, а лучше всего сделать своими руками на какой-нибудь тестовой HTML страничке.
При изучении языка программирования обычно пишут программу "Hello, world!", по которой можно понять какой синтаксис у этого языка и еще какие-нибудь базовые вещи. Но мы изучаем не язык программирования, а язык описания внешнего вида документа. Поэтому у нас будет свой "Hello, world!".
Вот что мы сделаем для примера: пусть у нас какой-нибудь блок <div> будет изначально с шириной 800px и за 5 секунд уменьшится до 100px.
Вроде бы всё понятно — просто нужно сжать блок <div> и всё! Давайте посмотрим как это выглядит в действительности.
Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице.
1 | <div class="toSmallWidth"></div> |
А вот что находится в файле стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .toSmallWidth { margin:20px auto; /*внешние отступы сверху и снизу по 20px и выравнивание по середине*/ background: red; /*красный фон у блока*/ height: 100px; /*высота блока 100px*/ width: 800px; /*начальная ширина 800px*/ -webkit-animation-name:animWidthSitehere; /* свойство с префиксом для браузеров Chrome, Safari, Opera */ -webkit-animation-duration:5s; /* свойство с префиксом для браузеров Chrome, Safari, Opera */ animation-name:animWidthSitehere; /* указываем название ключевых кадров (находятся ниже)*/ animation-duration: 5s; /*задаем длительность анимации*/ } /* ключевые кадры с префиксом для браузеров Chrome, Safari, Opera */ @-webkit-keyframes animWidthSitehere { from {width: 800px;} to {width: 100px;} } @keyframes animWidthSitehere { from {width: 800px;} /*первый ключевой кадр, где ширина блока 800px*/ to {width: 100px;} /*последний ключевой кадр, где ширина блока 100px*/ } |
Смотреть пример
Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически.
Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал.
3. Примеры анимации CSS3 посложнее
Выше Вы узнали как можно легко создать CSS3 анимацию. Если попробовали своими руками это сделать, то уже поняли весь процесс и сейчас хотите узнать как можно создать более сложную и красивую анимацию. А ее создать действительно можно. Ниже есть 3 урока где анимация создается также, как в примере выше.
Первый урок по преобразованиям на CSS, где Вы увидите 4 примера манипуляций с блоком, после чего сможете применить это на своём сайте.
В уроке Вы найдете применение свойств анимации на реальных примерах, которые можно использовать на сайте.
Здесь Вы узнаете как создавать более продвинутую анимацию, в которой совмещены сразу несколько преобразований.
Уроки помогут Вам понять анимацию CSS еще лучше. Главное — это пробовать повторять то, что Вы видите в уроках. Или хотя бы попробуйте изменять значения свойств и смотреть что получается, тогда Вы станете меньше боятся CSS.
4. Для ленивых — сервис генерации анимации
Чтобы понимать как работает анимация на CSS3, Вы просто обязаны разобраться с примером в начале статьи. Но если Вам лень писать код вручную — всегда можно найти выход. В данном случае выход — это использование генератора анимации CSS3. Ниже есть видео по использованию этих генераторов, а еще ниже ссылки на сами генераторы.
Вывод
Еще раз повторю и здесь: сначала разберитесь с примером в начале статьи, чтобы Вы понимали как строится анимация CSS3. После чего Вы можете воспользоваться генератором и легко создать анимацию на своё усмотрение. Я Вам рекомендую сначала разобраться с примером, потому что когда Вы генераторы не позволяют создавать очень «гибкие» анимации, которые Вы только пожелаете. Но если Вы знаете как устроен код, то с легкостью сможете дописать нужные свойства и получить очень крутой эффект в итоге.
Еще раз посмотрите всё по пунктам:
- Основные свойства CSS3 анимации
- Реальный пример анимации CSS3
- Примеры анимации CSS3 посложнее
- Для ленивых — сервис генерации анимации
Если Вам понравилась статья, то Вы можете поделиться ею с друзьями, кликнув на одну из кнопок социальных сетей ниже.
Успехов!
С Уважением, Юрий Немец
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
У вас пример работает исключительно на свойствах с префиксами. На свойствах без префиксов – анимация не идёт.
Александр, всё правильно. Я не хотел начинающих пугать еще свойствами с префиксами, так как кода получилось бы значительно больше. Но их использовать нужно, так как разные браузеры, понимают разные свойства с префиксами.
Я начинающий. Вы меня больше запутали, так-как повторяя шаги в статье ничего не работало, но благо есть инспектор кода и всё такое. Я хочу сказать, что эти свойства без префиксов в хроме не работают. То есть ваш туториал ни к чему не приводит, кроме обычного большого прямоугольника. Вот что я хотел сказать. Попробуйте сами. Если же я всё-таки ошибся, то прошу поправить.
Александр, я очень рад что Вы попробовали создать анимацию на CSS. И очень хорошо что Вы сами нашли решение проблемы. Это похвально!
Код из примера отлично работает в браузере Mozilla Firefox. Но я добавил код с префиксом -webkit-, чтобы анимация работала еще и в Chrome (так как большинство используют этот браузер).
Юрий, извини, что не по теме, а как ты демо организуешь? Cпециально для этих целей завел папку examples и к каждому примеру отдельный файл css подключаешь? Если брать простейшие примеры? 🙂 Я это к чему спрашиваю, делаю сайт, а точнее блог, как-бы дневник, там будут демо-примеры, ,конечно не такие как у тебя 🙂
И еще вопрос, style.css и скрипты, которые подключены к отдельной (демо) странице, в ее header, активируются только при запросе к этой странице? Или как?
Привет Егор, ответил тебе на email.
О! А можно и мне тоже?
Лично у меня jomla, в статью вставить HTML код в виде и все.
Но все зависит от сайта и рук. 😉