Учимся создавать анимированные эффекты с помощью css3

Базовая работа с @keyframes:

Для начала надо научится с ним работать базова, самые основы так сказать и понять в чём его суть, CSS анимация через keyframes, работает достаточно интересно.

Суть работы с @keyframes:

Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».

Свойства «animation-…» для @keyframes:

Этих свойств очень много  и применяются они к элементу, который вы хотите анимировать, сначала покажу только самые основные.

• animation-duration — Задаёт время анимации;
• animation-iteration-count — Задаёт сколько раз будет проигрываться анимация;
• animation-name — Задаёт имя анимации или имя @keyframes;

Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.

Пример работы с @keyframes:

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

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

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.square { width100px; height100px; background-colorgreen; animation-duration10s; animation-iteration-countinfinite; animation-namesquare1; }   @keyframes square { from { width100px; background-colorgreen; } 50% { background-colorblue; } to { width200px; background-colorred; } }

Разбор кода:

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

Потом задаём времени и сколько раз должно проигрываться, там используется параметр infinite, что значит проигрывать анимацию бесконечно, ну и в конце задаётся имя анимации.

Теперь что касается самой анимации, задаётся слово @keyframes, после него идёт имя анимации.

В from задаётся начальные свойства элемента, на которую используется анимация, но задавать его не обязательно, также это слово можно заменить, просто написав вместо него 0%.

Что касается 50%, то это какие свойства будут использоваться, когда анимация проигралась на 50%, можно использовать 30%, 20%, 70%, это не важно, главное чтобы не меньше 0% и не больше 100%. В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%

В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%.

Комбинация функций в свойстве transform

Достаточно часто приходится комбинировать 2 или 3 функции свойства transform. В этом случае следует указывать функции в свойстве transform через пробел, а не писать их несколько друг под другом.

несколько функций в свойстве transform

.circle1:hover {
transform: scale(1.5) rotate(90deg) translateY(-50px);
}
.circle2:hover {
transform: translateY(-50px) rotate(90deg) scale(1.5) ;
}
.circle3:hover {
transform: scale(1.5);/* неверно, выпонится только последняя трансформация */
transform: rotate(90deg); /* неверно, выпонится только последняя трансформация */
transform: translateY(-50px);
}

1 2 3 4 5 6 7 8 9 10 11

.circle1hover{ transformscale(1.5)rotate(90deg)translateY(-50px); } .circle2hover{ transformtranslateY(-50px)rotate(90deg)scale(1.5); } .circle3hover{ transformscale(1.5);/* неверно, выпонится только последняя трансформация */ transformrotate(90deg);/* неверно, выпонится только последняя трансформация */ transformtranslateY(-50px); }

See the Pen CSS transform: several functions by Elen (@ambassador) on CodePen.dark

Обратите внимание, что в зависимости от того, в какой последовательности перечислены свойства, эффект трансформации, возникающий при наведении, может быть разным. Альтернативой указанию нескольких свойств служит функция matrix()

Альтернативой указанию нескольких свойств служит функция matrix().

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

Свойство `animation-fill-mode` указывает, в каком состоянии элемент будет находиться до начала анимации и после её завершения:

• `animation-fill-mode: forwards;` — после завершения анимации элемент будет находиться в состоянии последнего кейфрейма;
• `animation-fill-mode: backwards;` — после завершения анимации элемент будет находиться в состоянии первого кейфрейма;
• `animation-fill-mode: both;` — перед началом анимации элемент будет находиться в состоянии первого кейфрейма, после завершения — в состоянии последнего.

В примере ниже к трём элементами применяется одна и та же анимация, различается лишь значение `animation-fill-mode`:

See the Pen BEFORE and AFTER animation by Dash Bouquet (@dashbouquetdevelopment) on CodePen.

Ошибка входа в интерфейс UEFI

Микропрограмма UEFI появилась относительно недавно. Она используется в основном на новых поколениях ноутбуков Acer. Если все существовавшие проблемы с BIOS уже давно были устранены, то с UEFI дела обстоят иначе — данная микропрограмма до сих пор дорабатывается своими создателями. Некоторые неполадки в работе UEFI можно решить при помощи штатных средств новейших версий операционных систем Windows — 8, 8.1 и 10. Для этого:

• Найдите в меню «Пуск» значок в виде шестеренки и кликните по нему. Откроется окно «Параметры Windows».
• Для ОС Windows 8 и 8.1 — перейдите в раздел «Изменение параметров компьютера», затем — «Общие» и «Особые параметры загрузки». На экране отобразится кнопка «Перезагрузить сейчас». Нажмите на нее.
• Для ОС Windows 10 — в окне «Параметры Windows» найдите и перейдите в раздел «Обновление и безопасность». Выберите в левой части окна подраздел «Восстановление». В правой части окна отобразится пункт «Особые варианты загрузки», а немного ниже — кнопка «Перезагрузить сейчас». Нажмите на нее.
• После перезагрузки ноутбука на экране отобразятся различные варианты загрузки. Среди них нужно найти и перейти в раздел — «Диагностика». Далее — «Дополнительные параметры» и «Параметры встроенного ПО UEFI». После выбора последнего элемента ноутбук вновь перезагрузится.
• Если все прошло успешно, после перезагрузки на экране сразу отобразится пользовательский интерфейс UEFI.

Обновление BIOS или UEFI

Устранить всевозможные неполадки в работе BIOS и UEFI можно путем обновления данных микропрограмм. Делается это очень просто:

• В выпадающем меню «Операционная Система» нужно выбрать версию и разрядность ОС Windows, установленную на ноутбуке (обычно сайт самостоятельно определяет версию Windows).
• Немного ниже найдите раздел «BIOS/Firmware» и откройте его.
• Отобразится список со всеми имеющимися обновлениями BIOS. Скачайте самую последнюю версию (кнопка «Загрузить» в самой верхней позиции списка).
• Будет скачан архив, внутри которого нужно найти EXE-файл (например, в случае с ноутбуком Aser Aspire VX5-591G он называется, как «C5PM2106.exe»).
• Запустите файл и следуйте инструкциям на экране.
• По завершению обновления вновь попробуйте войти в BIOS, используя стандартные клавиши.

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

Аппаратный сброс настроек BIOS

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

• Переверните ноутбук и осмотрите нижнюю сторону на наличие отверстия с надписью «CMOS». Если таковое имеется, в него достаточно вставить острый предмет до щелчка и удерживать его в течение 10-15 секунд.
• Кнопка «CMOS» также может располагаться под крышкой в нижней части ноутбука, которую несложно открыть. Просто открутите все винты и снимите крышку.
• Если и здесь кнопки не обнаружено, возможно, что ноутбук придется разбирать целиком. После разборки нужно найти на материнской плате круглую батарейку, что обеспечивает микросхему BIOS питанием при выключенном ноутбуке. Батарейку нужно вынуть на несколько минут, а затем установить обратно.
• На некоторых моделях ноутбуков Aser в конструкции материнской платы присутствует кнопка или перемычка с надписью «CCMOS», «CLR» или «CLRTC». Если это кнопка — на нее нужно нажать и удерживать несколько секунд. Если это перемычка — нужно замкнуть два контакта при помощи металлического предмета и удерживать в замкнутом состоянии несколько секунд.

За выполнение двух последних пунктов можно браться только при наличии опыта в ремонте ноутбуков. В противном случае его лучше отвезти в сервисный центр.

Анимация в действии

Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:

<style type="text/css">

    #outerspace {
        position: relative;
        height: 400px;
        background: #0c0440 url(/images/outerspace.jpg);
    }
    div.rocket {
        position: absolute;
        bottom: 10px;
        left: 20px;
        -webkit-transition: all 3s ease-in;
        -moz-transition: all 3s ease-in;
        -o-transition: all 3s ease-in;
        -ms-transition: all 3s ease-in;
        transition: all 3s ease-in;
    }
    div.rocket img {
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }
    #outerspace:hover div.rocket {
        -webkit-transform: translate(540px,-200px);
        -moz-transform: translate(540px,-200px);
        -o-transform: translate(540px,-200px);
        -ms-transform: translate(540px,-200px);
        transition: all 2s ease-in-out;
    }
    #outerspace:hover div.rocket img {
        -webkit-transform: rotate(70deg);
        -moz-transform: rotate(70deg);
        -o-transform: rotate(70deg);
        -ms-transform: rotate(70deg);
        transform: rotate(70deg);
    }

</style>

Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.

Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!

.rocket
#outerspace

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

Определение и применение

CSS свойство animation позволяет задать все свойства анимации в одном объявлении.
Это свойство является короткой записью для следующих свойств:

• animation-name («keyframename /-s | none | initial | inherit»)
• animation-duration («time | initial | inherit»)
• animation-timing-function («linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n,n,n,n) | initial | inherit»)
• animation-delay («time | initial | inherit»)
• animation-iteration-count («number | infinite | initial | inherit»)
• animation-direction («normal | reverse | alternate | alternate-reverse | initial | inherit»)
• animation-fill-mode («none | forwards | backwards | both | initial | inherit»)
• animation-play-state («paused | running | initial | inherit»)

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

Не забывайте в обязательном порядке указывать значение продолжительности анимации (animation-duration), иначе, анимация не будет проиграна, т.к. значение по умолчанию у этого свойства равно нулю.

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

Рандомизируйте z-index

Раз уж мы заговорили про рандомизацию, то будет не лишним отметить тот факт, что иногда бывает полезно в какой-то группе элементов задать им всем случайный z-index. Хотя бы в диапазоне (-1, 1). Часто такой прием используется при создании анимаций, где какой-нибудь заголовок заранее делится на отдельные span-элементы, а потом или они анимируются, или что-то анимируется вокруг них.

На чистом CSS это может выглядеть как-то так:

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

Заняный пример использования этого приема можно посмотреть в популярном примере, который сделала Ana Tudor:

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

Рассинхронизируйте все движения

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

Что это нам даст? Все очень просто – у нас рассинхронизируется вся анимация.

Этот совет, несмотря на свою простоту и очевидность, почему-то постоянно забывается и приводит к тому, что люди начинают сочинять очень сложные keyframes там, где можно просто рассинхронизировать длительности. Наверное это буквальное следования совету об использовании разных animation-timing-function. Они ведь такие, один раз попробуешь – и все. Вызывают зависимость. Не злоупотребляйте.

Множественные трансформации на одном элементе

Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:

<style type="text/css">

    #submenu {
        background-color: #eee;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    #submenu:hover {
        background-color: #fc3;
        -webkit-transform: rotate(360deg) scale(2);
        -moz-transform: rotate(360deg) scale(2);
        -o-transform: rotate(360deg) scale(2);
        -ms-transform: rotate(360deg) scale(2);
        transform: rotate(360deg) scale(2);
    }

</style>

Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере.

box 1
box 2

Укажите режим заполнения для анимации

CSS-анимация не влияет на элемент перед воспроизведением первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство может переопределить это поведение.

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

Свойство может иметь следующие значения:

• — Значение по умолчанию. Анимация не будет применять какие-либо стили к элементу до или после его выполнения
• — Элемент сохранит значения стиля, установленные последним ключевым кадром — зависит от animation-direction (направления анимации) и animation-iteration-count (итеративного подсчета анимации)
• — Элемент получит значения стиля, заданные первым ключевым кадром — зависит от animation-direction (направления анимации), и сохранит его в течение периода animation-delay (задержки анимации)
• — Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях.

В следующем примере элемент сохраняет значения стиля из последнего ключевого кадра после окончания анимации:

Пример

div {  width: 100px;  height: 100px;  background: red;  position: relative;  animation-name: example;  animation-duration: 3s;
  animation-fill-mode: forwards;
}

В следующем примере элемент получает значения стиля, установленные первым ключевым кадром, до начала анимации (в течение периода задержки анимации):

Пример

div {  width: 100px;  height: 100px; 
background: red;  position: relative; 
animation-name: example; 
animation-duration: 3s; 
animation-delay: 2s;  animation-fill-mode: backwards;
}

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

Пример

div {  width: 100px;  height: 100px;  background: red;
  position: relative; 
animation-name: example; 
animation-duration: 3s; 
animation-delay: 2s;  animation-fill-mode: both;
}

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Двумерная трансформация

Элементы могут быть искажены или преобразованы как в двух, так и в трёх плоскостях. Двумерные преобразования работают по осям х и у, известных как горизонтальная и вертикальная оси. Трёхмерные преобразования работают по осям х и у, а также оси z. Эти трёхмерные преобразования помогают определить не только длину и ширину элемента, но и глубину. Мы начнем с обсуждения, как трансформировать элементы в двумерной плоскости, а затем перейдём к работе с трёхмерными преобразованиями.

2d rotate

Свойство transform принимает несколько разных значений. Значение rotate обеспечивает возможность поворота элемента от 0 до 360 градусов. Положительное значение поворачивает элемент по часовой стрелке, а использование отрицательного значения поворачивает элемент против часовой стрелки. По умолчанию точкой поворота является центр элемента, 50% 50%, по горизонтали и вертикали. Позже мы обсудим как вы можете изменить эту точку поворота.

HTML

CSS

Демонстрация rotate

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

2d scale

Использование значения scale в свойстве transform позволяет изменить визуальный размер элемента. Значение масштаба по умолчанию равно 1, поэтому любое значение от .99 до .01 визуально уменьшает элемент, в то время как любое значение больше или равное 1.01 визуально увеличивает элемент.

HTML

CSS

Демонстрация scale

Можно масштабировать только высоту или ширину элемента, используя значения scaleX и ScaleY. Значение scaleX будет масштабировать ширину элемента, в то время как значение ScaleY будет масштабировать его высоту. Для масштабирования высоты и ширины элемента, но с разными размерами, могут быть одновременно установлены значения по оси х и у. Для этого используя декларацию scale, задав сперва значение по оси x, затем через запятую значение по оси y.

HTML

CSS

2d translate

Значение translate работает несколько похоже на относительное позиционирование, толкает и тянет элемент в разных направлениях, не прерывая обычного потока документа. Использование значения translateX изменит положение элемента по горизонтальной оси, значение translateY изменит положение элемента по вертикальной оси.

Как и со значением scale, чтобы одновременно установить значения по осям x и y, воспользуйтесь значением translate и сперва укажите значение по оси х, затем через запятую значение по оси y.

Значения расстояния, используемые внутри translate, могут быть любыми основными единицами длины, наиболее часто применяются пиксели или проценты. Положительные значения толкают элемент вниз и вправо от позиции по умолчанию, а отрицательные значения тянут элемент вверх и влево.

HTML

CSS

2d skew

Последнее значение skew в группе transform используется для искажения элементов по горизонтальной оси, вертикальной оси или двум осям сразу. Синтаксис очень похож на значения scale и translate. Применение значения skewX деформирует элемент по горизонтальной оси, в то время как значение skewY деформирует элемент по вертикальной оси. Чтобы исказить элемент по двум осям, используется значение skew, сперва задаётся значение по оси х, затем через запятую значение по оси у.

Значение skew измеряется в градусах. Единицы длины, такие как пиксели или проценты, здесь не применимы.

HTML

CSS

Angular Usage

Before getting started and to make use of the directive and the service provided by css-animator,
you have to import its module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AnimatorModule } from 'css-animator';

@NgModule({
  imports: 
    BrowserModule,
    AnimatorModule
  ,
  declarations: 
    AppComponent
  ,
  bootstrap: 
    AppComponent
  ,
})
export class AppModule { }

Angular Service

There is a little Angular2 service included, that gives you the power of dependency injection out of the box.

import { Component, OnInit } from '@angular/core';
import { AnimationService, AnimationBuilder } from 'css-animator';

@Component({ ... })
export class SomeComponent implements OnInit {

  private animator: AnimationBuilder;

  constructor(animationService: AnimationService, private elementRef: ElementRef) {
    this.animator = animationService.builder();
  }

  ngOnInit() {
    this.animator.setType('fadeInUp').show(this.elementRef.nativeElement);
  }

}

Angular Directive

Feel free to create your own directive around css-animator. For you to get started, there is one included in this package.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div animates #animation="animates">
      <span (click)="animation.start({type: 'bounce'})">Click me!</span>
    </div>
  `
})
export class AppComponent {

}

It is possible to default options on the element, that will be used if you call .
You can pass any option that the interface supports like this: .

<div
animates
#animation="animates"
animates="{ type: 'wobble', duration: '2000' }" // default options are optional
animatesInitMode="show" // Can be used with  for "show" or "hide"
="{ type: 'fadeInUp' }" // automatically animate on init (optional)
(click)="animation.start()"
(mouseleave)="animation.pause()"
(mouseenter)="animation.resume()"
>
</div>

CSS Свойства анимации

В следующей таблице перечислены правила @keyframes и все свойства CSS-анимации.:

Свойство	Описание
@keyframes	Определяет код анимации
animation	Сокращенное свойство для установки всех свойств анимации
animation-delay	Определяет задержку начала анимации
animation-direction	Определяет, должна ли анимация воспроизводиться вперед, назад или поочередно
animation-duration	Определяет, сколько времени анимация должна занять для завершения одного цикла
animation-fill-mode	Определяет стиль для элемента, когда анимация не воспроизводится (до его начала, после его завершения или и того, и другого)
animation-iteration-count	Определяет, сколько раз анимация должна проигрываться
animation-name	Определяет имя анимации @keyframes
animation-play-state	Указывает, запущена ли анимация или приостановлена
animation-timing-function	Определяет кривую скорости анимации

❮ Prev
Next ❯

Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.

Программы удаленного доступа

Системным администраторам часто приходится подключаться к удаленным рабочим местам. Для реализации этого функционала существует много программ. Самая популярная и у всех на слуху — teamviewer. Но она платная, а в бесплатной версии существуют ограничения, которые зачастую не позволяют ее использовать. Приходится искать компромиссы.

Есть неплохой аналог — LiteManager. В бесплатной версии существует ограничение на 30 рабочих мест. Если у вас их меньше или вы используете программу для доступа к каким-то техническим машинам, там где не подходит rdp по какой-то причине (сервер СКУД, клиент видеонаблюдения и т.д.), то возможно вам будет достаточно этой программы.

Если у вас больше 30-ти рабочих мест и нужен удаленный доступ ко всем машинам, то выход — vnc сервер. Я предпочитаю TightVNC. Решение подходит только для локальной сети, либо для канала хотя бы в 30-50 мегабит. У vnc очень медленный протокол и пользоваться им при низкой скорости канала просто невозможно.

Если нужен удаленный доступ по vnc в локальную сеть, то можно использовать vpn, либо более просто вариант — подключаться куда-то в локалку по rdp, а потом уже по vnc. С современными скоростями интернета получается вполне рабочий вариант. Я использую в некоторых ситуациях. Для безопасности просто ограничиваю доступ по rdp на уровне ip. У меня есть возможность подключаться с нескольких статичных ip адресов.

@keyframes

Сама анимация на веб-странице делается с помощью двух вещей. Продолжительность анимации, задержка перед её выполнением, число повторений и другие параметры указываются через универсальное свойство animation. А ключевые кадры и значения свойств элемента определяются правилом @keyframes. Затем они связываются между собой с помощью переменной, имя для которой мы придумываем сами. Схематично это выглядит так.

Таким образом, создав несколько заготовок ключевых кадров мы можем их применять к разным элементам указывая нужную переменную. Вот, например, как сделать плавное появление текста на экране (пример 1).

Пример 1. Появление текста

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Анимация</title>
<style>
.fadeIn {
animation: fadeIn 3s;
background: #fc0;
padding: 10px;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class=»fadeIn»>Основные области применения заклёпочных соединений —
авиационная техника и судостроение.</div>
</body>
</html>

В данном примере мы создаём элемент с классом fadeIn, к которому применяется свойство animation со значением fadeIn 3s. Это означает, что анимация будет длиться три секунды, но что именно будет происходить за это время animation не знает, в его задачу лишь входит перенаправление к @keyframes с именем fadeIn. Внутри @keyframes есть два ключевых слова — from и to, они определяют начальное и конечное значение свойств элемента. Исходя из этого браузер за три секунды плавно меняет значение opacity с 0 до 1.

Обратите внимание на префикс -webkit. Браузер Chrome не поддерживает оригинальные свойства, поэтому приходится дублировать записи, добавляя этот префикс

Анимация может быть сложной и содержать более двух ключевых кадров, чем это показано в примере выше. Тогда ключевые кадры указываются в процентах от времени всей анимации. 0% — начало анимации, 100% — время её окончания, 50% — середина и т. д. Если какие-то ключевые кадры имеют одинаковое состояние, то их можно группировать, как показано в примере 2.

Пример 2. Ключевые кадры

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Анимация</title>
<style>
.tinLeftOut {
animation: tinLeftOut 3s;
}
@keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity: 1; transform: scale(1, 1) translateX(0);
}
10%, 30% {
opacity: 1; transform: scale(1.1, 1.1) translateX(0);
}
100% {
opacity: 0; transform: scale(1, 1) translateX(-900%);
}
}
</style>
</head>
<body>
<img src=»image/cat.jpg» alt=»» class=»tinLeftOut»>
</body>
</html>

Ключевые слова from и to соответствуют 0% и 100%, поэтому можно указывать как проценты, так и эти ключевые слова, они взаимозаменяемы.

Анимируйте неанимируемые свойства в keyframes

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

На самом деле тут происходит некоторая игра слов – например свойство visibility формально является “анимируемым”, но по факту мы не можем плавно перевести его значение из одного в другое. Так что здесь мы говорим скорее о свойствах, которые “нельзя плавно изменить”.

Поведение неанимируемых свойств в keyframes плохо поддается систематизированию. По идее они должны меняться в конце анимации или в конце фрейма, после которого их поменяли, но на практике в разных браузерах это может происходить по-разному, особенно если мы говорим про IE/Edge, который нет-нет да и встречается в требованиях. Да и у Safari бывают свои тараканы в голове. Видимо светлое будущее еще не наступило. Так что, во избежание встречи с разными редкими багами, воспользуемся небольшой уловкой.

Для того, чтобы точно знать, когда наше значение изменится, нам понадобится ограничить промежуток времени, на котором будет происходить изменение его значения. Так, вне зависимости от поведения браузера, мы получим, что оно поменяется плюс-минус в тот же миг, что и нужно нам.

Для начала небольшой пример, как это вообще возможно. На примере z-index:

Здесь мы прямо посреди анимации создаем два фрейма на расстоянии 1% от анимации и меняем значение неанимируемого свойства

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

В качестве примера возьмем вот такую абстрактную штуку:

Обратите внимание на то, как точки уходят друг под друга по очереди. Без изменения z-index мы бы не смогли получить такой эффект

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

Устранение конфликта 2 звуковых карт

transition-delay

В можно определить задержку перед началом анимации. Например, если , тогда анимация начнётся через 1 секунду после изменения свойства.

Отрицательные значения также допустимы. В таком случае анимация начнётся с середины. Например, если равно , а – , тогда анимация займёт одну секунду и начнётся с середины.

Здесь приведён пример анимации, сдвигающей цифры от до с использованием CSS-свойства со значением :

Результат
script.js
style.css
index.html

Свойство анимируется следующим образом:

В примере выше JavaScript-код добавляет класс к элементу, после чего начинается анимация:

Можно начать анимацию «с середины», с определённого числа, например, используя отрицательное значение , соответствующие необходимому числу.

Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:

Результат
script.js
style.css
index.html

JavaScript делает это с помощью нескольких строк кода:

8 Best Animated Websites with CSS & HTML Animation

We’ve pulled together a well-selected list of the best animated websites available today. These web animation examples use cool animations and illustrations to demonstrate products and services, display brand style, create mood, and even lead the user through a story.

1. Your Plan, Your Planet

by MediaMonks

Animations：

• Hover
• CSS3 animation
• Storytelling animations

Your Plan, Your Planet is a CSS animation website example designed by MediaMonks. The concept of this site is to help people plan for a more sustainable future in a playful way through simple tips and isometric illustrations that take Material Design to another dimension.

Техника безопасности при установки капельницы

Basic Usage

1. Include the stylesheet on your document’s

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

<head>
  <link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
  integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
  crossorigin="anonymous">
  <!-- or -->
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
  integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
  crossorigin="anonymous">
</head>

1. Add the class to the element you want to animate.
   You may also want to include the class for an infinite loop.

2. Finally you need to add one of the following classes:

Class Name

Full example:

<h1 class="animated infinite bounce">Example</h1>

Заключение

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