@keyframes

Animation Shorthand Property

The example below uses six of the animation properties:


Example

div {  animation-name: example;   animation-duration: 5s;   animation-timing-function: linear;   animation-delay: 2s;   animation-iteration-count: infinite;   animation-direction: alternate; }

The same animation effect as above can be achieved by using the shorthand property:

Example

div {   animation: example 5s linear 2s infinite alternate; }

Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

Flags

Long name (short name) Argument types Properties

Move amounts are absolute.

When false, moving keys will not preserve breakdown timing, when true (the default) breakdowns will be adjusted to preserve their timing relationship.

Where this command should get the animation to act on. Valid values are «objects,» «keys,» and «keysOrObjects» Default: «keysOrObjects.» (See Description for details.)

List of attributes to select

In query mode, this flag needs a value.

Sets the breakdown state for the key. Returns an integer. Default is false. The breakdown state of a key cannot be set in the same command as it is moved (i.e., via the -tc or -fc flags).

Modifies the final time where a key is inserted using an offset, pivot, and scale.

This flag explicitly specifies whether or not to include the control points of a shape (see «-s» flag) in the list of attributes. Default: false. (Not valid for «pasteKey» cmd.)

In query mode, this flag needs a value.

Returns the value(s) of the animCurves when evaluated (without regard to input connections) at the times given by the -t/time or -f/float flags. Cannot be used in combination with other query flags, and cannot be used with time ranges (-t «5:10»). When no -t or -f flags appear on the command line, the evals are queried at the current time. Query returns a float[].

value uniquely representing a non-time-based key (or key range) on a time-based animCurve. Valid floatRange include single values (-f 10) or a string with a lower and upper bound, separated by a colon (-f «10:20»)

In query mode, this flag needs a value.

How much (with -relative) or where (with -absolute) to move keys (on non-time-input animation curves) along the x (float) axis. Returns float[] when queried.

Hierarchy expansion options. Valid values are «above,» «below,» «both,» and «none.» (Not valid for «pasteKey» cmd.)

In query mode, this flag needs a value.

When the -t/time or -f/float flags represent a range of keys, this flag determines whether the keys at the upper bound of the range are included in the keyset. Default value: true. This flag is only valid when the argument to the -t/time flag is a time range with a lower and upper bound. (When used with the «pasteKey» command, this flag refers only to the time range of the target curve that is replaced, when using options such as «replace,» «fitReplace,» or «scaleReplace.» This flag has no effect on the curve pasted from the clipboard.)

index of a key on an animCurve

In query mode, this flag needs a value.

Query-only flag that returns an int for the key’s index.

Returns an int for the number of keys found for the targets.

When used in queries, this flag returns requested values for the last selected key.

Returns the names of animCurves of specified nodes, attributes or keys.

Valid values are «move,» «insert,» «over,» and «segmentOver.» When you «move» a key, the key will not cross over (in time) any keys before or after it. When you «insert» a key, all keys before or after (depending upon the -timeChange value) will be moved an equivalent amount. When you «over» a key, the key is allowed to move to any time (as long as a key is not there already). When you «segmentOver» a set of keys (this option only has a noticeable effect when more than one key is being moved) the first key (in time) and last key define a segment (unless you specify a time range). That segment is then allowed to move over other keys, and keys will be moved to make room for the segment.

Move amounts are relative to a key’s current position.

When used in queries, this flag returns requested values for any active keys.

Consider attributes of shapes below transforms as well, except «controlPoints». Default: true. (Not valid for «pasteKey» cmd.)

In query mode, this flag needs a value.

Sets the special drawing state for this key when it is drawn as a tick in the timeline.

time uniquely representing a key (or key range) on a time-based animCurve. Valid timeRanges include single values (-t 10) or a string with a lower and upper bound, separated by a colon (-t «10:20»)

In query mode, this flag needs a value.

How much (with -relative) or where (with -absolute) to move keys (on time-input animation curves) along the x (time) axis. Returns float[] when queried.

How much (with -relative) or where (with -absolute) to move keys along the y (value) axis. Returns float[] when queried.

Flag can appear in Create mode of command

Flag can appear in Edit mode of command

Flag can appear in Query mode of command

Flag can have multiple arguments, passed either as a tuple or a list.

Defining

Defining keyframes happens before any any animation logic takes place. The CSS is stored and indexed in a single style tag in the header with the id .

Adding a new animation sequence (keyframe)

Keyframes.define({
    name: 'trapdoor-sequence',
    '0%': {height: 70},
    '30%': {height: 10},
    '60%': {height: 30},
    '100%': {height: 10}
});

Adding a single frame style

Keyframes.define({
    name: 'ball-roll',
    from: {
        transform: 'rotate(0deg)'
    },
    to: {
        transform: 'rotate(360deg)'
    }
});

Adding multiple frame styles

Keyframes.define({
	name: 'roll-clockwise',
	'0%': {
	    marginLeft: ,
	    backgroundColor: 'red',
	    transform: 'rotate(0deg)'
	},
	'100%': {
	    marginLeft: 600,
	    transform: 'rotate(360deg)'
	}
    },{
	name: 'roll-anti-clockwise',
	'0%': {
	    marginLeft: ,
	    backgroundColor: 'red',
	    transform: 'rotate(0deg)'
	},
	'100%': {
	    marginLeft: 600,
	    transform: 'rotate(-360deg)'
	}
    }
);

Adding styles and properties in array fashion

Gives resemblance to CSS styling definitions

var shake_start = {transform: 'translate(0px)'};
var shake_odd1 = {transform: 'translate(-10px, -10px)'};
var shake_even1 = {transform: 'translate(10px, 10px)'};
var shake_odd2 = {transform: 'translate(10px, -10px)'};
var shake_even2 = {transform: 'translate(-10px, 10px)'};

Keyframes.define({
	name: 'crazy',
	'0%': shake_start,
	'10%': shake_odd2,
	'20%': shake_even1,
	'30%': shake_odd2,
	'40%': shake_even2,
	'50%': shake_odd2,
	'60%': shake_even1,
	'70%': shake_odd1,
	'80%': shake_even2,
	'90%': shake_odd1
    }
);

Please note, you can add as many properties to the array as you want to

Responsive animations

Keyframes.define({
    name: 'roll-clockwise',
    media: 'screen and (max-width: 700px)',
    from: {
        marginLeft: 
    },
    to: {
        marginLeft: 600
    }
    }
);

Remarks

Класс Keys содержит константы для обработки ввода с клавиатуры.The Keys class contains constants for processing keyboard input. Члены перечисления Keys состоят из кода ключа и набора модификаторов, Объединенных в одно целое значение.The members of the Keys enumeration consist of a key code and a set of modifiers combined into a single integer value. В интерфейсе прикладного программирования (API) Win32 значение ключа имеет две половины, а старшие биты содержат код ключа (то же, что и код виртуального ключа Windows), а младшие биты, представляющие модификаторы ключа, такие как SHIFT, CONTROL и ALT.In the Win32 application programming interface (API) a key value has two halves, with the high-order bits containing the key code (which is the same as a Windows virtual key code), and the low-order bits representing key modifiers such as the SHIFT, CONTROL, and ALT keys.

Warning

Не используйте значения из этого перечисления для Объединенных побитовых операций.Do not use the values in this enumeration for combined bitwise operations. Значения в перечислении не являются взаимоисключающими.The values in the enumeration are not mutually exclusive.

Note

Это перечисление не дает возможности проверить, активированы ли в настоящее время клавиши CAPS LOCK или NUM LOCK.This enumeration provides no way to test whether the CAPS LOCK or NUM LOCK keys are currently activated. Чтобы определить, активированы ли эти ключи, можно использовать один из следующих методов.You can use one of the following techniques to determine if these keys are activated:

  • Вызовите метод IsKeyLocked класса Control .Call the IsKeyLocked method of the Control class.

  • Для более точного управления используйте функции Windows API , или , определенные в user32. dll.For finer control, use the Windows API functions , , or defined in user32.dll, to do this. Дополнительные сведения о вызове собственных функций см. в разделе Использование неуправляемых функций DLL.For more information about calling native functions, see Consuming Unmanaged DLL Functions.

В следующей таблице показаны ключевые значения кода, представленные двумя перечисляемыми значениями, представляющими общие ключи изготовителя оборудования (OEM) и более конкретные связи с клавиатурой США.The following table shows the key code values represented by two enumerated values, representing both the general original equipment manufacturer (OEM) keys and the more specific U.S.-keyboard associations.

Шестнадцатеричное значениеHexadecimal value Клавиатура СШАU.S. keyboard Общий изготовитель оборудованияGeneral OEM
BABA оемсемиколонOemSemicolon OEM1Oem1
BFBF оемкуестионOemQuestion Oem2Oem2
C0C0 оемтилдеOemtilde Oem3Oem3
DBDB оемопенбраккетсOemOpenBrackets Oem4Oem4
DCDC оемпипеOemPipe Oem5Oem5
DDDD оемклосебраккетсOemCloseBrackets Oem6Oem6
DEDE оемкуотесOemQuotes Oem7Oem7
E2E2 оембаккслашOemBackslash Oem102Oem102

Caution


Для .NET Framework 2,0 был добавлен член Имеакцепт, заменяющий предыдущую запись Имеацеепт, которая была написана неправильно.For the .NET Framework 2.0, a member IMEAccept was added that supersedes the previous entry, IMEAceept, which was spelled incorrectly. Старая версия сохранена для обеспечения обратной совместимости, но может быть удалена в будущих версиях .NET FrameworkThe older version has been retained for backward compatibility, but it may be deleted in future versions of the .NET Framework

Рисуйте на CSS

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

В русскоязычном сообществе как-то так повелось (причем уже давно, я не застал начало этого феномена) разделять “верстальщиков” и “фронтендеров”. И считается, что верстальщики – это люди, которые знают HTML и CSS, но совершенно не умеют в JS, а фронтендеры – это люди, которые пишут на JS, но при этом верстку считают занятием недостойным и так и не начинают в ней разбираться. Наверное это работает в каких-то крупных компаниях, где действительно можно организовать такое разделение задач, что каждый занимается чем-то одним, но мне кажется, что у нас профессия все же единая – мы делаем интерфейсы для сайтов, веб-приложений – тут можно по всякому играть словами, но набор навыков должен быть один и тот же у всех. Ну может быть за исключением WebGL, как узконаправленной технологии, которая действительно нужна не везде.

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

Для того, чтобы быстро прокачать свое понимание CSS, очень полезно на CSS порисовать. И поанимировать то, что нарисовали, раз уж мы говорим про анимации. Это звучит глупо, несколько лет назад это казалось вообще странной затеей, но, как показала практика – работает. В одной более-менее комплексной CSS-картинке будет такое количество хитрых задачек на верстку, которое вы с обычных лендингов будете собирать неделями. Вариант “просто верстать страницы, пока не научишься” работает не так хорошо, как хотелось бы. Слишком медленный он. А здесь, именно за счет концентрации задач, идет ускорение обучения. Такой экспресс-курс в неочевидные возможности CSS получается. Ну и результат может быть забавным, не без этого.

Базовая работа с @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%.

magic

Скачайте полную или упакованную версию библиотеки по этому адресу https://github.com/miniMAC/magic и подключите её к своему сайту.

Теперь к выбранным элементам добавляем класс magictime и класс с именем выбранного на сайте эффекта (пример 4). Увеличение продолжительности анимации делается аналогично, с помощью свойства animation-duration.

Пример 4. Использование magic

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Анимация</title> <link href=»magic.css» rel=»stylesheet»> <style> .magictime { animation-duration: 3s; } </style> </head> <body> <p><img src=»image/figure.jpg» alt=»» class=»magictime perspectiveUpRetourn»></p> </body> </html>анимация

Определение целевых элементов

Для создания анимации с помощью Anime.js нужно вызвать функцию и передать ей объект с парами ключ-значение, которые определяют целевые элементы и свойства, которые вы хотите анимировать. Вы можете использовать ключевое слово , чтобы дать библиотеке понять, что вам нужно анимировать. Это ключевое слово может принимать значение в разных форматах.


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

В первом случае Anime.js будет анимировать все элементы с классом . Во втором —  или . В третьем случае Anime.js будет анимировать все дочерние чётные элементы с классом . А в последнем случае библиотека будет взаимодействовать со всеми элементами с классом , у которых нет класса .

See the Pen Setting Target as a CSS Selector by Monty (@Shokeen) on CodePen.

DOM-узлы (DOM node) или коллекция узлов (NodeList): вы можете также использовать DOM-узел или NodeList в качестве значения для ключевого слова . Посмотрите на пример использования DOM-узла для .

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

Существует множество функций, которые вы также можете использовать для выбора целевого элемента. Например, вы можете обратиться к элементам с определённым классом, используя функцию . Или к элементам с определённым тегом, используя функцию .

Хакатон на Полярном круге 2.0

29 октября – 1 ноября, Салехард, беcплатно

tproger.ru

События и курсы на tproger.ru

Любая функция, возвращающая DOM-узел или NodeList, может использоваться для установки значения в Anime.js.

See the Pen Setting Target as a DOM Node or Node List by Monty (@Shokeen) on CodePen.

Объект: вы можете использовать объекты JavaScript в качестве значения для . Ключ этого объекта используется в качестве идентификатора, а значение — в качестве числа, которое нужно анимировать.

Затем вы сможете показать анимацию внутри другого HTML-элемента с помощью дополнительного JavaScript-кода. Ниже приведён пример анимации значений двух разных ключей одного объекта.

Код выше будет приводить в движение счётчик сканированных файлов от 0 до 1 000 и счётчик заражённых файлов от 0 до 8. Помните, что вы можете анимировать числовые значения только таким образом. При попытке анимировать ключ из в будет выведено сообщение об ошибке.

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

See the Pen Setting Target as an Object by Monty (@Shokeen) on CodePen.

Массив: возможность указывать массив JavaScript в качестве значения будет полезна, если вам нужно анимировать множество элементов, которые относятся к разным категориям. Например, если вы хотите анимировать DOM-узел, объект и множество других элементов, основанных на CSS-селекторах, то можно это сделать, поместив их в массив, а затем определить массив в качестве значения для . Пример ниже должен прояснить ситуацию.

See the Pen Setting Target as an Array by Monty (@Shokeen) on CodePen.

Usage

Detecting CSS animation support

var supportedFlag = $.keyframe.isSupported();

Adding a new animation sequence (keyframe)

$.keyframe.define({
    name: 'trapdoor-sequence',
    '0%': {'height': '70px'},
    '30%': {'height': '10px'},
    '60%': {'height': '30px'},
    '100%': {'height': '10px'}
});

Adding a single frame style

$.keyframe.define({
    name: 'ball-roll',
    from: {
        'transform': 'rotate(0deg)'
    },
    to: {
        'transform': 'rotate(360deg)'
    }
});

Adding multiple frame styles

$.keyframe.define({
	name: 'roll-clockwise',
	'0%': {
	    'margin-left' : '0px',
	    'background-color' : 'red',
	    'transform' : 'rotate(0deg)'
	},
	'100%': {
	    'margin-left' : '600px',
	    'transform' : 'rotate(360deg)'
	}
    },{
	name: 'roll-anti-clockwise',
	'0%': {
	    'margin-left' : '0px',
	    'background-color' : 'red',
	    'transform' : 'rotate(0deg)'
	},
	'100%': {
	    'margin-left' : '600px',
	    'transform' : 'rotate(-360deg)'
	}
    }
);

Adding styles and properties in array fashion

Gives resemblance to CSS styling definitions

var shake_start = {'transform': 'translate(0px)'};
var shake_odd1 = {'transform': 'translate(-10px, -10px)'};
var shake_even1 = {'transform': 'translate(10px, 10px)'};
var shake_odd2 = {'transform': 'translate(10px, -10px)'};
var shake_even2 = {'transform': 'translate(-10px, 10px)'};

$.keyframe.define({
	name: 'crazy',
	'0%': shake_start,
	'10%': shake_odd2,
	'20%': shake_even1,
	'30%': shake_odd2,
	'40%': shake_even2,
	'50%': shake_odd2,
	'60%': shake_even1,
	'75.3%': shake_odd1,
	'80.45%': shake_even2,
	'91.6%': shake_odd1
    }
);

Please note, you can add as many properties to the array as you want to


Responsive animations

$.keyframe.define({
    name: 'roll-clockwise',
    media: 'screen and (max-width: 700px)',
    from: {
        'margin-left' : '0px'
    },
    to: {
        'margin-left' : '600px'
    }
    }
);

Playing an animation

$(selector).playKeyframe({
    name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element
    duration: '1s', //  how long you want it to last in milliseconds
    timingFunction: 'linear', //  specifies the speed curve of the animation
    delay: '0s', //  how long you want to wait before the animation starts
    iterationCount: 'infinite', //  how many times you want the animation to repeat
    direction: 'normal', //  which direction you want the frames to flow
    fillMode: 'forwards', //  how to apply the styles outside the animation time, default value is forwards
    complete: function(){} // Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
});

Playing an animation (shorthand)

$(selector).playKeyframe(
    'trapdoor-sequence 1s linear 0s infinite normal forwards',
    complete
);

Playing multiple animations

$(selector).playKeyframe(
    'trapdoor-sequence 1s linear 0s infinite',
    {
      name: 'ball-roll',
      duration: "3s",
      timingFunction: 'ease',
      iterationCount: 1
    }
, complete);

Reset the animation

$(selector).resetKeyframe(callback);

Freeze keyframe animation and kill callbacks

$(selector).pauseKeyframe();

Resume keyframe animation

$(selector).resumeKeyframe();

KeyframeSequence Structure

KeyframeSequences are a container that hold s. Keyframes represent a ‘key’ frame in the animation, that are interpolated between during playback.

Keyframes contain s. s are specific to each being animated and contain the applied to the connecting to the part. Poses are named according to the they correspond with. For this reason, animations require distinct part names to play correctly.

Poses are structured based on joint hierarchy. Each is parented to the corresponding to the part it is attached to. In practice, this means the poses branch out from the root part. See below for a visual example.

Delay an Animation

The property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

Example

div {  width: 100px;  height: 100px;  position: relative;  background-color: red;  animation-name: example;   animation-duration: 4s;  animation-delay: 2s;}

Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds.

In the following example, the animation will start as if it had already been playing for 2 seconds:

Example

div {  width: 100px;  height: 100px;  position: relative;  background-color: red;  animation-name: example;  animation-duration: 4s;  animation-delay: -2s;}

Событие transitionend

Когда завершается анимация, срабатывает событие .

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

Например, корабль в приведённом ниже примере начинает плавать туда и обратно по клику, каждый раз все дальше и дальше вправо:

Анимация начинается с помощью функции , которая вызывается каждый раз снова, когда переход заканчивается и меняется направление:

Объект события содержит ряд полезных свойства:

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

Итого

CSS-анимации позволяют плавно, или не очень, менять одно или несколько свойств.

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

Ограничения CSS-анимаций в сравнении с JavaScript-анимациями:

Достоинства

  • Простые анимации делаются просто.
  • Быстрые и не создают нагрузку на CPU.

Недостатки

  • JavaScript-анимации более гибкие. В них может присутствовать любая анимационная логика, как например «взорвать» элемент.
  • Можно изменять не только свойства. Мы можем создавать новые элементы с помощью JavaScript для анимации.

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

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


С этим читают