17 крутых анимаций, созданных на чистом css

CSS-анимация

358

00:30:29

19.10.2018

Страница урока — 🤍

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

На примере горизонтального меню разобрано создание эффекта плавного изменения прозрачности (opacity) и высоты (height) всплывающего блока. Добавление необходимых стилей проводилось непосредственно в окне браузера Mozilla в приложении FireBug. Эффекты плавного изменения прозрачности и высоты создавались путем указания четырех CSS-свойств: transition-property (название изменяемого CSS-свойства), transition-duration (продолжительность анимации), transition-timing-function (математическая функция, описывающая изменение) и transition-delay (задержка анимации). Приведена сокращенная запись свойств семейства transition. Продемонстрирован графический способ построения кривых Безье, используемых для математического описания изменения CSS-свойства, и онлайн сервис Cubic-Bezier.com для тестирования анимационного эффекта.

На примере изменения ширины всплывающего окна рассмотрено добавление пошаговых анимаций с ключевым словом 🤍keyframes и CSS-свойствами семейства animation: animation-name (произвольное имя анимации), animation-duration (продолжительность анимации), animation-timing-function (функция, описывающая анимацию), animation-iteration-count (число повторений анимации), animation-direction (направление анимации), animation-fill-mode (воздействие анимации на элемент до и после анимации) и animation-play-state (состояние анимации). Приведены примеры сокращенной записи CSS-свойств семейства animation и применения префиксов производителей -webkit-, -moz-, -ms- и -o- для поддержки CSS-анимаций максимальным количеством браузеров.

Трансформация на CSS3 (transform)

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

Например, используем поворот transform: rotate(<угол>):

.orange img, .kiwi img, .apricot img{
	-webkit-transition: all 0.5s linear 0s;
	-moz-transition: all 0.5s linear 0s;
	-o-transition: all 0.5s linear 0s;
	transition: all 0.5s linear 0s;
}
.orange:hover img, .kiwi:hover img, .apricot:hover img{
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

Или же смещение transform: translate(x, y):

.translate img{
	-webkit-transition:all 1.5s ease-in 0s;
	-moz-transition: all 1.5s ease-in 0s;
	-o-transition: all 1.5s ease-in 0s;
	transition: all 1.5s ease-in 0s;
}
.translate:hover img{
	-webkit-transform: translate(300px);
	-moz-transform: translate(300px);
	-ms-transform: translate(300px);
	-o-transform: translate(300px);
	transform: translate(300px);
}

Также можно применить масштаб transform: scale(x, y):

.scale img{
	-webkit-transition: all 1.5s linear 0s;
	-moz-transition: all 1.5s linear 0s;
	-o-transition: all 1.5s linear 0s;
	transition: all 1.5s linear 0s;
}
.scale:hover img{
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-ms-transform: scale(1.4);
	-o-transform: scale(1.4);
	transform: scale(1.4);
}

И еще наклон transform: skewX(<угол>):

.skew{
	-webkit-transition: all 1.5s linear 0s;
	-moz-transition: all 1.5s linear 0s;
	-o-transition: all 1.5s linear 0s;
	transition: all 1.5s linear 0s;
	}
.skew:hover{
	-webkit-transform: skew(-30deg);
	-moz-transform: skew(-30deg);
	-ms-transform: skew(-30deg);
	-o-transform: skew(-30deg);
	transform: skew(-30deg);
	}

CSS анимация / Основы CSS animation

9091

635

00:27:20

12.12.2019

На канале уже давно есть видео посвящённое основным css свойствам. В нём я обошёл стороной свойства css анимация, поскольку она делается не так часто. И поэтому держать в голове все свойства относящиеся к данному модулю я не вижу смысла. В этом видео мы на примере css loader разберёмся с реализацией css animation. Я покажу как делается анимация с помощью keyframe с несколькими ключевыми точками. Также вы увидите как можно сделать задержу анимации — delay, а ещё как делать css анимацию бесконечной — infinite, либо, чтобы она воспроизводилась только несколько раз.

Telegram
Канал — 🤍
Чат — 🤍

Подписывайтесь в соц. сетях:
Facebook — 🤍
VKontakte — 🤍
LinkedIn — 🤍
Twitter — 🤍
Instagram — 🤍

Мой второй канал:
🤍

Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только.
Больше информации обо мне: 🤍

Beautiful Math by

Every website owner wants to capture a huge range of audiences’ attention on their site. However, it cannot be done without a stunning background which makes a very first impression for viewers.

Beautiful Math is such an interesting animation example that is published by Artyom. This animation example provides a visual demonstration of four imaginative drawing papers on a pink background. On each paper, the orange draws are in the finishing process, each of which looks really unique and completely not the same, that hopefully creates exciting feelings for viewers.

What else is stopping you from updating your page with a new look? Install the Beautiful Math and brighten up your website.

Анимация поста в блоге на чистом #CSS

317

00:12:06

12.07.2020

#codesample #html #css

Анимация поста в блоге на чистом #CSS | Blog Post Animation

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

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

Books Hover Animation by

Background plays an important role in any website as it helps make your pages become more attractive and fulfilled. We’d like to introduce to you one animation example that may diverse your choices.

Books Hover Animation is a Yancy Min’s design. The example depicts two Chinese books which related to astronomy topic as they both have the cover of space and planets. Moreover, it is obvious to see the shadow of the books under them. The main point is, these two books are hovering to the left side of the whole border. Once you move the mouse over each book, it will have the tendency to open.

Let’s take a look and a try on the background and we hope that it will shine your website.

Coffee Machine Pure CSS Animation by

Every website owner wants to capture a huge range of audiences’ attention on their site. However, it cannot be done without a stunning background, which makes a very first impression for viewers.

Coffee Machine by Henrique Rodrigues depicts an image of a coffee machine which is producing delicious hot coffee. The machine in the central area of the framework looks modern with the bright grey color and black button. There is a smooth flow of dark coffee produced from this machine to a white mug, evaporating hot smoke to the air.

Let’s take a try on this background, and you will not be disappointed.

Как установить задержку перед анимацией?

Теперь давайте научимся дополнительно настраивать нашу анимацию. Есть несколько свойст CSS 3, которые нам в этом помогут. Можно добавить их в отдельный CSS-файл, или включить прямо в тело нашей страницы с помощью тега «style» (обычно так не делают, но для примера сойдет).
Сами свойства:animation-duration – продолжительность анимации,animation-delay – задержка перед анимацией,animation-iteration-count – количесво повторений, можем поставить число, или infinite – для бесконечных повторений.
Попробуем для начала изменить продолжительность анимации (не забываем про префиксы для браузеров):

<h3 id="pr3" class="animated shake">Пример 3, изменили продолжительность</h3>
    <style>
    #pr3{
        -webkit-animation-duration: 2s;
        -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
        animation-duration: 2s;
    }
    </style>

Теперь давайте установим задержку в 2 секунды, а количесво повторений в 5:

 <h3 id="pr4" class="animated shake">Пример 4, задержка анимации 2 секунды, повторяется 5 раз</h3>
    <style>
    #pr4{
        -webkit-animation-delay: 2s;
        -moz-animation-delay: 2s;
        -o-animation-delay: 2s;
        animation-delay: 2s;
        
        -webkit-animation-iteration-count: 5;
        -moz-animation-iteration-count: 5;
        -o-animation-iteration-count: 5;
        animation-iteration-count: 5;
    }
    </style>

Все замечательно работает, но применение библиотеки сильно ограниченно. Как это решить? Давайте добавим немножно JQuery!
Скачиваем актуальную версию здесь, и подключаем в разделе head:

<script src="jquery-1.11.3.min.js"></script>

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

<h3 id="pr5">Пример 5, анимация по клику</h3>
    <script>
    $('#pr5').click(function() {
        $('#pr5').addClass('animated shake');
    });
    
    </script>

Так же, можно вызывать анимацию при наведении мыши:

 <h3 id="pr6">Пример 6, анимация по клику</h3>
    <script>
    $('#pr6').hover(
        function() {
            $(this).addClass('animated shake');
        },
        function() {
            $(this).removeClass('animated shake');
        }
    );
    </script>

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

<h3 id="pr7">Пример 7, анимация по клику, затем вызов еще одной анимации</h3>
    <script>
        $('#pr7').click(function() {
            $('#pr7').addClass('animated shake');
        });
        
        $('#pr7').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $('#pr7').addClass('fadeOut', function() {$('#pr7').hide();});
        });
    </script>

Что здесь происходит:

Мы вызываем анимацию по клику
Отлавливаем ее завершение с помощью функции .one
Вызываем еще одну анимацию, в конце которой прячем объект

Как по мне, получилось здорово =)
Еще одна крутая фишка, которую можно сделать с Jquery, это
Анимация при прокрутке:

 <h3 id="pr8">Пример 8, анимация при прокрутке</h3>
    <script>
        $(window).scroll(function() {
        $('#pr8').each(function(){
          if ($(this).offset().top < $(window).scrollTop()+300) {
            $(this).addClass('animated wobble');
          }
        });
      });
    </script>

Скрипт достаточно простой, мы следим пока наш элемент не появится на странице, и добавляем к нему класс анимации.

Состояние элемента до и после воспроизведения анимации

Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.

animation-fill-mode
Значения:
`none`	Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
`forwards`	Воспроизводит анимацию до последнего кадра по окончанию последнего повтора и не отматывает ее к первоначальному состоянию.
`backwards`	Возвращает состояние элемента после загрузки страницы к первому кадру, даже если установлена задержка `animation-delay`, и оставляет его там, пока не начнется анимация.
`both`	Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.
`inherit`	Наследует это свойство от родительского элемента.

CSS Lighthouse Scene by

On viewing a website, one thing that may affect readers’ impression on the site appearance is the framework. Understand that mindset, we would like to recommend to you an animation example that is likely to help increase the attraction of your pages.

CSS Lighthouse Scene one of the agathaco’s designs, which give the visual demonstration of a lighthouse built up in the middle of the sea. The main tone of color is dark blue as it describes the night scene of the ocean. The lighthouse illuminates brighten the right side from which we can see mountains and the moon. There is a little boat floating on the surface of the sea.

Let’s take a try on this example and you will not be disappointed.

CSS АНИМАЦИЯ для новичков. HTML уроки. ПРАКТИКА

6328

334

00:15:01

03.07.2020

Привет!

В этом уроке я рассказываю про CSS анимацию.
Покажу вам два примерно с использованием свойства transition и правила 🤍keyframes.
В первом примере сделаем с вами анимированную панель, которая выезжает из верхней границы экрана (bar).
Во втором примере сделаем квадрат которые непрерывно двигается по кругу и при этом меняет цвета и свою форму.

Если слова HTML и CSS вас пугают, то рекомендую посмотреть перед этим вот два видео:
HTML для начинающих за 33 минуты — 🤍
CSS для начинающих + практика за 24 минуты — 🤍
НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ!
Желаю приятного обучения!

Тайминг
00:00 — Начало. Примеры;
01:19 — Подготовка документов;
02:58 — Первая анимация. Transition;
07:20 — Первая анимация. Keyframes;
10:06 — Вторая анимация. Keyframes;
13:25 — Вторая анимация. Изменение формы;

Telegram: 🤍

Автор видеоурока: Дмитрий Колотильщиков

Dot Menu Animations by

Dot Menu Animation is published by Tamino Martinius as a very simple yet interesting animation with the tone of the blue palette. The whole image is divided into four equal rectangle parts, each of which is painted by different shades of blue. Moving close to the center of the whole picture, there are four symmetrically ordered vertical lines of three dots, with the two above ones transform into multiplication signs and the other two change into arrows.

Only by a click to install and embed it onto your page, you will own an absolutely special background that will attract your viewers at first sight.

CSS АНИМАЦИЯ для новичков. HTML уроки. ПРАКТИКА

6328

334

00:15:01

03.07.2020

Привет!

Telegram: 🤍

Автор видеоурока: Дмитрий Колотильщиков

solar eclipse by

Let’s have a look at one of the impressive animation examples that were designed by Aris Acoba. This promisingly is one that will give you a hand to customize your page as a really stunning scene.

Solar eclipse, as its own name, provides a visualization of the total solar eclipse phenomenon since the light of the sun has not been adequately covered by the moon till it happens. The dark part of the moon gradually steals the spotlight of the sun, and the light apparently diminishes, then appears again, finishing the cycle of an eclipse.

With this stunning background, we hope that you will own a unique frontend look only by simple steps installing it.

Best Practices

Animations can greatly improve an interface’s UX, but it’s important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.

Meaningful animations

You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user’s attention to something special in your interface and not only as a way to bring «flashiness» to it.

Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it’s transitioning into a new state.

It doesn’t mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page’s performance is not affected by an exaggerated use of animations.

Don’t animate large elements

Avoid it as it won’t bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX.

Don’t animate root elements

Animating the or tags is possible, but you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole page bounce would hardly provide good value to your UX. If you indeed need this sort of effect, wrap your page in an element and animate it, like this:

Infinite animations should be avoided

Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!

Mind the initial and final state of your elements

All the Animate.css animations include a CSS property called , which controls the states of an element before and after animation. You can read more about it here. Animate.css defaults to , but you can change it to suit your needs.

Don’t disable the media query

Since version 3.7.0 Animate.css supports the media query which disables animations based on the OS system’s preference on supporting browsers (most current browsers support it). This is a critical accessibility feature and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it here. If your web-thing needs the animations to function, warn users, but don’t disable the feature. You can do it easily with CSS only. Here’s a simple example:

See the Pen
Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita)
on CodePen.

Анимация градиента на чистом CSS!

25136

1187

00:04:27

15.03.2019

В этом видео вы узнаете как сделать анимацию градиента на CSS. Будем использовать анимацию CSS — keyframes для оживления нашего градиента на фоне страницы.

Основы HTML и CSS для начинающих: 🤍
Верстка сайта транспортной компании: 🤍
Файлы урока: 🤍

Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке — HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.

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

Мой ВК — 🤍
Группа BC — 🤍
Мой Instagram: 🤍

#верстка #html #css #css3

Анимация часов с использованием HTML CSS

1388

00:07:05

03.09.2020

#html#css#js#2020

Анимация часов с использованием CSS
Анимация часов с использованием HTML CSS
Учебное пособие по анимации часов на чистом CSS
Руководство по CSS анимации часов
CSS часы
HTML CSS часы
CSS-часы Анимация
Анимированные часы
Анимированные часы только с использованием HTML CSS
Анимированные часы в HTML CSS
CSS-часы Анимация
CSS анимация
Учебник по CSS-анимации
Учебник по HTML CSS Animation
CSS анимации
Анимация с использованием CSS
анимация в CSS

Clock Animation using CSS
Clock Animation using HTML CSS
Clock Animation Pure CSS Tutorial
Clock Animation CSS tutorial
CSS clock
HTML CSS clock
CSS clock Animation
Animated clock
Animated clock using HTML CSS only
Animated clock in HTML CSS
CSS clock Animation
CSS Animation
CSS Animation tutorial
HTML CSS Animation tutorial
Animation CSS
Animation using CSS
animation in CSS

Простая анимация SVG | vivus.js

21111

892

00:23:55

12.11.2019

В данном видео вы узнаете как легко сделать анимацию для ваших SVG иконок на сайте. В этом нам поможет скрипт vivus.js

// Ссылки =

Vivus.js github: 🤍
Материалы урока: 🤍

// О проекте =

Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разрабокте — HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.

// Соц. сети =

Мой ВК — 🤍
Группа BC — 🤍
Мой Instagram: 🤍

Использование:

Чтобы анимировать элемент, нужно добавить к нему класс и эффект из таблицы ниже:

Название класса
bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat

Можно также добавить класс для бесконечного цикла, задержку и продолжительность эффекта:

Задержка:

Название класса	Время задержки
delay-2s	2s
delay-3s	3s
delay-4s	4s
delay-5s	5s

Продолжительность:

Название класса	Скорость
slow	2s
slower	3s
fast	800ms
faster	500ms

Пример:

Анимация часов с использованием HTML CSS

1388

00:07:05

03.09.2020

#html#css#js#2020

Верстка сайта — HTML,CSS анимации с нуля при прокрутке

25442

1705

00:13:19

04.02.2021

Верстка сайта не заканчивается просто написанием тегов. Для того что б сайт выглядел интересно пользователю, — добавляют анимации. Сейчас доступно Html css анимации и вы можете их сделать с нуля. Верстка сайта с анимациями очень проста на самом деле, вы можете создать интересные эффекты CSS анимации своими руками. Анимации html css я покажу в этом видео, а так же мы их не просто создадим, а покажу библиотеку для анимации при прокрутке страницы сайта. В конце мы возьмем обычный сайт и я покажу как сделать анимацию при прокрутке на любом сайте с нуля даже если вы начинающий.

Что можно анимировать — 🤍
Примеры анимации — 🤍

0:00 — Верстка сайта анимации
0:33 — Анимации html, css с нуля для начинающих
3:59 — Свойстива анимации CSS
5:30 — Примеры анимации css html
6:20 — Интересный пример анимации
10:05 — Библиотека анимации при прокрутке
11:00 — Добавляем анимацию на сайт