More stuff

Примеры:

Просто добавляем на сайт стили animate.css:

Скачать: animate.min.css

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

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

Название класса
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
Пример:

Пример

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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

We asked Alex to share his top ‘do’s’ and don’ts’ for using Auto-Animate in Adobe XD:

The do’s

  • Manage your layers and groupings from the start.
  • Copy and paste assets instead of re-drawing them. Duplicate your artboards, and then manipulate the duplicate — this way you know your layer structure and layer names are going to be consistent.
  • Use symbols when they make sense. If you have something repeated across multiple artboards, and you know the layers inside the symbol won’t ever animate, then use a symbol. This way, if you need to make a minor change to static layers, you won’t have to update all artboards. Otherwise, if you do have to update manually, you might notice you missed one, and it will auto-animate the differences of the old static layers and the updated ones.
  • Play around with the easing options. They can give you completely different feelings.  Adobe XD now includes new easing options like ‘Snap,’ ‘Wind,’ ‘Bounce,’ and each of these can really change the feel of your web animation.
  • Use animation distance to give the illusion of objects moving at different speeds.
  • Use timed transitions to string together a series of animations. If you want a series of effects to happen, then add a duplicate artboard between animations and set the transition to “time.” From there you can start a new animation automatically.

Specify the fill-mode For an Animation

CSS animations do not affect an element before the first keyframe is played
or after the last keyframe is played. The animation-fill-mode property can
override this behavior.

The property specifies a
style for the target element when the animation is not playing (before it
starts, after it ends, or both).

The animation-fill-mode property can have the following values:

  • — Default value. Animation will not
    apply any styles to the element before or after it is executing
  • — The element will retain the
    style values that is set by the last keyframe (depends on animation-direction
    and animation-iteration-count)
  • — The element will get the style
    values that is set by the first keyframe (depends on animation-direction), and
    retain this during the animation-delay period
  • — The animation will follow the rules
    for both forwards and backwards, extending the animation properties in both
    directions

The following example lets the

How to make the best-animated websites? Pick the right animation tools!

1. ANIMATE.CSS

Animate.CSS has more than 60 animation effects, including almost all common animation effects. With this animation library, designers can easily and quickly create CSS3 animation websites.

2. MAGIC ANIMATIONS

Magic Animations is a unique CSS3 animation effect package that designers can use freely in their own website projects. Designers need only introduce CSS styles on the page: magic.css or the compressed version magic.min.css.

3. BOUNCE.JS

Bounce.js is a very powerful visual CSS3 animation code generation JS library plugin. You can edit various animation effects of CSS3 using their visual interface. In addition, Bounce.js can also be used alone to complete various CSS3 animation effects through JS code.

4. Mockplus

Mockplus is a web prototyping tool to create cool interactive websites with navigation bar switching designs and scroll-triggered animation effects.

CSS transitions

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

При наведении курсора на квадрат плавно изменяется цвет фона.

Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию:

  • transition-property;
  • transition-duration;
  • transition-timing-function;
  • transition-delay;
  • transition;

transition-property — указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

Пример:

transition-property: width;

transition-duration — задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

Пример:

transition-duration: 1s;

transition-timing-function — временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это
целая тема для статьи, поэтому здесь мы не будем углубляться.

Пример:

transition-timing-function: cubic-bezier(0, 0, 1, 1);

transition-delay — задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

Пример:

transition-delay: 500ms;

transition — это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

Пример:

transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

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

Work with GIF and SVG files

Sometimes we need GIF for optimizing browser compatibility or for advanced animation. While Loading.css provides simple, predefined animation types, it’s used in loading.io to provide image generation with more sophisticated animation, includes:

  • Upload Animation Generator — build animated icons in SVG / GIF / PNG by uploading your own images. Also support layered animation with SVG files.
  • Text Animation Editor — build GIF / SVG / APNG files with customizable text, style and animation with your choice.
  • Loading.io’s Animated Icon Library — a complete icon library with the ability to customize style and animation of chosen icons, and output SVG / GIF / APNG format.

With the GIF Builder You can upload PNG, JPG, SVG and even another animated GIF. SVG is also supported; in addition, you can animate SVG by layers and save it sa SVG file again. We suggest you to use SVG since it keeps good quality after resizing. Here are two examples from the GIF Builder:

Other installation options:

Option 4:

  • Close After Effects

  • Extract the zipped file on to the adobe CEP folder:
    WINDOWS:
    MAC:
    (you can open the terminal and type:
    then type:
    to make sure it was copied correctly type)

  • Edit the registry key:
    WINDOWS:
    open the registry key and add a key named , of type String, and value .
    MAC:
    open the file and add a row with key , of type String, and value .

After installing

  • Windows: Go to Edit > Preferences > Scripting & Expressions… > and check on «Allow Scripts to Write Files and Access Network»
  • Mac: Go to Adobe After Effects > Preferences > Scripting & Expressions… > and check on «Allow Scripts to Write Files and Access Network»

Old Versions

  • Windows: Go to Edit > Preferences > General > and check on «Allow Scripts to Write Files and Access Network»
  • Mac: Go to Adobe After Effects > Preferences > General > and check on «Allow Scripts to Write Files and Access Network»

Videohive TypoKing | Title Animation — Kinetic Typography Text v5

5-09-2018, 06:20   |   Category: after effects project » Titles

TypoKing | Title Animation — Kinetic Typography Text v5 11263341 Videohive — Free After Effects Templates

After Effects Version CC 2018, CC 2017, CC 2016, CC 2015 | No Plugin | Resizable | 446 Mb

Music Information :

The musics in demo are not included. You can purchase them from Audiojungle.net :Chic Funk from BrownHouseMedia

Right now ! Sign up for a «FREE TRIAL» on Prefiles.com For Fast Download !!

Download — From Prefiles.com

Download — From Nitroflare.com

Download — From Novafile.Com

Download — From Rapidgator.net

Download — From Zippyshare.com

Download — From Usercloud.com

Vip /

You are Guest, Please login or create new account and buy points

TO MAC USERS:If password doesn’t work, use this archive program: The Unarchiver and extract password protected files without error.
TO WIN USERS: If password doesn’t work, use this archive program: WINRAR 5.50 and extract password protected files without error.

Animations

Animations are groups of frames that are interchanged every now and then.

  • is an array of frames (Quads in LÖVE argot). You could provide your own quad array if you wanted to, but using a grid to get them is very convenient.
  • is a number or a table. When it’s a number, it represents the duration of all frames in the animation. When it’s a table, it can represent different durations for different frames. You can specify durations for all frames individually, like this: or you can specify durations for ranges of frames: .
  • is an optional parameter which can be a function or a string representing one of the animation methods. It does nothing by default. If specified, it will be called every time an animation «loops». It will have two parameters: the animation instance, and how many loops have been elapsed. The most usual value (apart from none) is the
    string ‘pauseAtEnd’. It will make the animation loop once and then pause and stop on the last frame.

Animations have the following methods:

Use this inside so that your animation changes frames according to the time that has passed.

Moves the animation to a given frame (frames start counting in 1).

Stops the animation from updating (@animation:update(dt)@ will have no effect)

Unpauses an animation

Creates a new animation identical to the current one. The only difference is that its internal counter is reset to 0 (it’s on the first frame).

Flips an animation horizontally (left goes to right and viceversa). This means that the frames are simply drawn differently, nothing more.

Note that this method does not create a new animation. If you want to create a new one, use the method.

This method returns the animation, so you can do things like or .

Flips an animation vertically. The same rules that apply to also apply here.

Moves the animation to its last frame and then pauses it.

Moves the animation to its first frame and then pauses it.

Returns the width and height of the current frame of the animation. This method assumes the frames passed to the animation are all quads (like the ones
created by a grid).

This functions returns the parameters that would be passed to when drawing this animation:
.

  • is the currently active frame for the animation (usually a quad produced by a grid)
  • are the same coordinates passed as parameter to (there are no changes)
  • is the same angle passed to , with no changes unless it is , in which case it becomes 0.
  • are the scale values, with their sign changed if the animation is flipped vertically or horizontally
  • are the offset values, with the width or height properly substracted if the animation is flipped. 0 is used as a initial value for these calculations if nil was passed.
  • are the shearing factors, changed depending on the flip status.
local id = spriteBatch:add(animation:getFrameInfo(x,y,r,sx,sy,ox,oy,kx,ky))

...

spriteBatch:set(id, animation:getFrameInfo(x,y,r,sx,sy,ox,oy,kx,ky))

You can see an example of this in the spritebatch-demo branch.

Installation

Just copy the anim8.lua file wherever you want it. Then require it wherever you need it:

Please make sure that you read the license, too (for your convenience it’s included at the beginning of the anim8.lua file).

Specify the fill-mode For an Animation

CSS animations do not affect an element before the first keyframe is played
or after the last keyframe is played. The animation-fill-mode property can
override this behavior.

The property specifies a
style for the target element when the animation is not playing (before it
starts, after it ends, or both).

The animation-fill-mode property can have the following values:

  • — Default value. Animation will not
    apply any styles to the element before or after it is executing
  • — The element will retain the
    style values that is set by the last keyframe (depends on animation-direction
    and animation-iteration-count)
  • — The element will get the style
    values that is set by the first keyframe (depends on animation-direction), and
    retain this during the animation-delay period
  • — The animation will follow the rules
    for both forwards and backwards, extending the animation properties in both
    directions

The following example lets the

element retain the style values from the
last keyframe when the animation ends:

Example

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

The following example lets the

element get the style values set by the
first keyframe before the animation starts (during the animation-delay period):

Example

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

The following example lets the

element get the style values set
by the first keyframe before the animation starts, and retain the style values
from the last keyframe when the animation ends:

Example

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

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;
}

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

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

❮ Previous
Next ❯

HOW TO

TabsDropdownsAccordionsSide NavigationTop NavigationModal BoxesProgress BarsParallaxLogin FormHTML IncludesGoogle MapsRange SlidersTooltipsSlideshowFilter ListSort List

Why You Need an Animated Website?

For designers, the maturity of CSS and HTML has made designers more creative than ever before, bringing life to websites with CSS animations. Cool animation and creative UX writing are always impressive. They can also help to explain complex ideas quickly and easily, as well as guide users’ actions with the help of appropriate CTA.

Related: 8 Best Free Responsive CSS Website Templates for Building Your Website

For users, a cool and logical animated website has a better guide on actions. If you checking the data, you can find that the interactive website will hold a longer visit and higher conversation than the static one. Because animated and illustrated websites have more personalized dynamic visual effects that contribute to user satisfaction and longer site visits.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS MarginsCSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

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

Usage

To use animate.css in your website, simply drop the stylesheet into your document’s , and add the class to an element, along with any of the animation names. That’s it! You’ve got a CSS animated element. Super!

head>
  link rel="stylesheet" href="animate.min.css">
head>
head>
  link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
head>

Animations

To animate an element, add the class to an element. You can include the class for an infinite loop. Finally you need to add one of the following classes to the element:

Class Name

Full example:

h1 class="animated infinite bounce delay-2s">Exampleh1>

It’s possible to change the duration of your animations, add a delay or change the number of times that it plays:

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

The css

/*
   ANIMATIONS
*/
.a-dir-norm { -webkit-animation-direction: normal; animation-direction: normal; }
.a-dir-rev { -webkit-animation-direction: reverse; animation-direction: reverse; }
.a-dir-alt { -webkit-animation-direction: alternate; animation-direction: alternate; }
.a-dir-alt-rev { -webkit-animation-direction: alternate-reverse; animation-direction: alternate-reverse; }
@media screen and (min-width: 48em) {
 .a-dir-norm-ns { -webkit-animation-direction: normal; animation-direction: normal; }
 .a-dir-rev-ns { -webkit-animation-direction: reverse; animation-direction: reverse; }
 .a-dir-alt-ns { -webkit-animation-direction: alternate; animation-direction: alternate; }
 .a-dir-alt-rev-ns { -webkit-animation-direction: alternate-reverse; animation-direction: alternate-reverse; }
}
@media screen and (min-width:48em) and (max-width: 64em) {
 .a-dir-norm-m { -webkit-animation-direction: normal; animation-direction: normal; }
 .a-dir-rev-m { -webkit-animation-direction: reverse; animation-direction: reverse; }
 .a-dir-alt-m { -webkit-animation-direction: alternate; animation-direction: alternate; }
 .a-dir-alt-rev-m { -webkit-animation-direction: alternate-reverse; animation-direction: alternate-reverse; }
}
@media screen and (min-width: 64em) {
 .a-dir-norm-l { -webkit-animation-direction: normal; animation-direction: normal; }
 .a-dir-rev-l { -webkit-animation-direction: reverse; animation-direction: reverse; }
 .a-dir-alt-l { -webkit-animation-direction: alternate; animation-direction: alternate; }
 .a-dir-alt-rev-l { -webkit-animation-direction: alternate-reverse; animation-direction: alternate-reverse; }
}

CSS transitions

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

Например, CSS, представленный ниже, 3 секунды анимирует свойство .

Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.

При клике на эту кнопку происходит анимация её фона:

Есть всего 5 свойств, задающих анимацию:

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

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

Run Animation in Reverse Direction or Alternate Cycles

The property specifies
whether an animation should be played forwards, backwards or in alternate
cycles.

The animation-direction property can have the following values:

  • — The animation is played as normal
    (forwards). This is default
  • — The animation is played in
    reverse direction (backwards)
  • — The animation is played
    forwards first, then backwards
  • — The animation is played
    backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example

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

The following example uses the value «alternate» to make the animation
run forwards first, then backwards:

Example

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

The following example uses the value «alternate-reverse» to make the animation
run backwards first, then forwards:

Example

div {  width: 100px;  height: 100px; 
position: relative;  background-color: red;  animation-name: example;  animation-duration: 4s;  animation-iteration-count: 2;  animation-direction:
alternate-reverse;}

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

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

Usage with Javascript

You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

You can also detect when an animation ends:

const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

element.addEventListener('animationend', function() { doSomething() })

You can use this simple function to add and remove the animations:

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

And use it like this:

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
  // Do something after animation
})

How it works

After Effects

  • Open your AE project and select the bodymovin extension on Window > Extensions > bodymovin
  • A Panel will open with a Compositions tab listing all of your Project Compositions.
  • Select the composition you want to export.
  • Select a Destination Folder.
  • Click Render
  • look for the exported json file (if you had images or AI layers on your animation, there will be an images folder with the exported files)

HTML

  • get the lottie.js file from the build/player/ folder for the latest build
  • include the .js file on your html (remember to gzip it for production)
script src="js/lottie.js" type="text/javascript">script>

You can call lottie.loadAnimation() to start an animation.
It takes an object as a unique param with:

  • animationData: an Object with the exported animation data.
  • path: the relative path to the animation object. (animationData and path are mutually exclusive)
  • loop: true / false / number
  • autoplay: true / false it will start playing as soon as it is ready
  • name: animation name for future reference
  • renderer: ‘svg’ / ‘canvas’ / ‘html’ to set the renderer
  • container: the dom element on which to render the animation

It returns the animation instance you can control with play, pause, setSpeed, etc.

lottie.loadAnimation({
  container element, // the dom element that will contain the animation
  renderer 'svg',
  loop true,
  autoplay true,
  path 'data.json' // the path to the animation json
});

Composition Settings:

Check this wiki page for an explanation for each setting.
https://github.com/airbnb/lottie-web/wiki/Composition-Settings

Run Animation in Reverse Direction or Alternate Cycles

The property specifies
whether an animation should be played forwards, backwards or in alternate
cycles.

The animation-direction property can have the following values:

  • — The animation is played as normal
    (forwards). This is default
  • — The animation is played in
    reverse direction (backwards)
  • — The animation is played
    forwards first, then backwards
  • — The animation is played
    backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example

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

The following example uses the value «alternate» to make the animation
run forwards first, then backwards:

Example

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

The following example uses the value «alternate-reverse» to make the animation
run backwards first, then forwards:

Example

div {  width: 100px;  height: 100px; 
position: relative;  background-color: red;  animation-name: example;  animation-duration: 4s;  animation-iteration-count: 2;  animation-direction:
alternate-reverse;}

Usage

To use animate.css in your website, simply drop the stylesheet into your document’s , and add the class to an element, along with any of the animation names. That’s it! You’ve got a CSS animated element. Super!

head>
  link rel="stylesheet" href="animate.min.css">
head>
head>
  link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
head>

Animations

To animate an element, add the class to an element. You can include the class for an infinite loop. Finally you need to add one of the following classes to the element:

Class Name

Full example:

h1 class="animated infinite bounce delay-2s">Exampleh1>

It’s possible to change the duration of your animations, add a delay or change the number of times that it plays:

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Motion Path Module

Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

В этой спецификаии есть 3 свойства:

  • motion-path;
  • motion-offset;
  • motion-rotation;

motion-path — это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

Пример:

motion-path: path('M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z');

motion-offset — это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

Пример:

@keyframes airplane-fly {
    0%   { motion-offset: 0; }
    100% { motion-offset: 100%; }
}

motion-rotation — это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах (‘-45deg’, ’30deg’ и т.д).

Пример:

motion-rotation: auto;

К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

Итого

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

Альтернатива им – плавное изменение значений свойств через JavaScript, мы рассмотрим подробности далее.

Ограничения и достоинства CSS-анимаций по сравнению с JavaScript:

Недостатки

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

Достоинства

Простые вещи делаются просто.
«Легче» для процессора, чем анимации JavaScript, лучше используется графический ускоритель

Это очень важно для мобильных устройств.. Подавляющее большинство анимаций делается через CSS

Подавляющее большинство анимаций делается через CSS.

При этом JavaScript запускает их начало – как правило, добавлением класса, в котором задано новое свойство, и может отследить окончание через событие .

Ссылка на основную публикацию