Анимация в CSS, уроци, webreference

Наскоро се убедихме, че преходът - това е просто начин на анимация стил имоти от първоначалното до крайното състояние.

Така че, в CSS преходи са специфичен вид анимация, когато:

  • има само две състояния: в началото и в края;
  • анимация не е глава;
  • междинните състояния са контролирани от само функция на времето.

Но какво, ако искате да:

  • контрол върху междинните състояния?
  • контур анимация?
  • правят различни видове анимации за един артикул?
  • за анимиране на определен имот е само половината път?
  • симулира различен в зависимост от времето за различни свойства?

Анимация CSS позволява всичко това и още.

Анимация като мини-филм, в който можете като режисьор са даване на инструкции (правило стил) си актьори (елементи на HTML) за различни сцени (ключови кадри).

свойствата на анимацията

Както преход. анимация имот е съкращение за няколко други:

  • анимация име. Името на анимацията;
  • анимация, продължителност. колко време анимацията;
  • анимация-време-функция. като междинни съединения изчислява състояние;
  • анимация забавяне. анимация започва след известно време;
  • анимация, повторение-преброяване. колко пъти анимацията трябва да се извърши;
  • анимация-посока. движението трябва да отиде в обратната посока или не;
  • анимация, запълваща режим. какво стилове се прилагат преди началото на анимацията, както и след неговото приключване.

Един бърз пример

За да се съживи бутона за изтегляне, можете да напишете подскачащи анимация:

Първо трябва да се напише реално анимационна подскачащи използване @keyframes и го наричат ​​подскачащи. След това можете да използвате тази анимация, да го прилагате към бутонът натоварване.

Използвах кратка анимация функция и са включени всички възможни варианти:

  • анимация име: подскачащи (със същото име като ключови кадъра)
  • анимация продължителност: 0.5s (половин секунда)
  • анимация-време-функция: кубичен-Bezier (0.1,0.25,0.1,1)
  • анимация забавяне: 0s (без забавяне)
  • анимация, повторение-брои: безкраен (безкрайно възпроизведен)
  • анимация посока: алтернативен (отива напред и назад)
  • анимация попълване режим: и двете

@keyframes

Преди да кандидатствате анимация към елементите на HTML, което трябва да се напише анимацията с помощта на ключови кадри. Като цяло, основната рамка - е всеки междинен етап в анимацията. Те се определят с помощта на интерес:

  • 0% - първата стъпка на анимация;
  • 50% - ход, на половината път към анимация;
  • 100% - последния етап.

Можете да използвате ключови думи от и до, вместо 0% и 100%, съответно.

Можете да определите най-много ключови кадри, колкото искате, като например 33%, 4% или дори 29,86%. На практика, вие ще напиша само някои от тях.

Всеки ключов кадър е правило за CSS. Това означава, че можете да пишете на CSS свойства, както обикновено.

За определяне на анимацията, просто напишете @keyframes ключови думи към името си:

Имайте предвид, че в началото на края на 0% и 100% съдържа същите правила, CSS. Това гарантира, че анимация воля линия перфектно. Тъй като брояча на повторения се задава като безкраен. анимацията ще премине от 0% до 100%, а веднага след това обратно до 0%, и така нататък завинаги.

анимация име

Името на анимацията се използва най-малко два пъти:

  • когато пишете анимация използване @keframes;
  • използване на анимация свойства чрез анимация име (или съкращение анимация собственост).

Подобно на имената на CSS класа, името на анимацията може да включва само:

Името не може да започва с цифра или две тирета.

анимация продължителност

Тъй като продължителността на прехода. анимацията може да се зададе в секунда (1 S) или милисекунди (200 милисекунди).

Стойността по подразбиране е 0 с, това означава, че не е анимация на всички.

анимация-време-функция

Като функция от времето за прехода. в зависимост от времето за анимацията да използвате ключови думи. като линейна. лекота на, или може да бъде определена чрез произволни криви Безие.

Стойност по подразбиране: лекота.

От анимацията в CSS използва ключови кадри, можете да зададете линейна функция на времето и симулира специфичен Безие крива, определяне на броя много специфични ключови кадри. Виж Bounce.js да създаде напреднали анимация.

анимация забавяне

Както при забавянето на прехода. анимация забавяне може да се зададе в секунда (1 S) или милисекунди (200 милисекунди).

Стойността по подразбиране е 0 с, което означава липса на забавяне.

Полезно, когато множество анимации е включена в поредицата.

анимация, повторение-броене

По подразбиране, анимацията се играе само веднъж (до 1). Можете да зададете три вида стойности:

  • са цели числа, като например 2 или 3;
  • дробни числа като 0.5, които ще бъдат възпроизвеждани само половината от анимацията;
  • ключова дума безкраен. който ще повтори анимацията за неопределено време.

анимация посока

Анимация-посока собственост, определя реда, в който да се чете основната рамка.

  • нормалното. Тя започва от 0%, в края на 100%, като се започва от 0% отново.
  • обратната. започва от 100%, завършвайки при 0%, започва от 100% отново.
  • заместник. Тя започва от 0%, отива до 100% възвръщаемост на 0%.
  • заместник-назад. започва от 100%, отива до 0% връща към 100%.

По-лесно е да си представим, ако анимация повторения контра е настроен на безкрайност.

анимация попълване режим

Имоти анимация попълване режим определя какво ще се случи преди началото на анимацията, както и след неговото приключване.

При определянето на тези кадри можете да зададете правила CSS. която ще се прилага в различни етапи на анимацията. Сега тези правила CSS може да се сблъскват с тези, които вече са подали заявление за animatable елементи.

анимация, запълваща режим ви позволява да каже на браузъра, ако animatsiitakzhe стилове, които се прилагат извън анимацията.

Да си представим един бутон. който е:

  • Подразбиране червено;
  • Тя се превръща в синьо в началото на анимацията;
  • и най-накрая в зелено. когато анимацията е завършена.