Синтакса анимације кључног оквира - ЦСС-трикови

Anonim

Основна декларација и употреба

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Ради краткоће, остатак кода на овој страници неће користити префиксе, али употреба у стварном свету треба да користи све префиксе добављача одозго

Више корака

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Ако анимација има иста својства почетка и завршетка, један од начина да се то уради је раздвајање вредности зарезом 0% и 100% зарезом:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Или, увек можете рећи анимацији да се покрене два пута (или било који паран број пута) и упутити правац до alternate.

Позивање анимације кључног кадра са одвојеним својствима

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Стенографија анимације

Само раздвојите размаком све појединачне вредности. Редослед није важан, осим када се користе и трајање и кашњење, они морају бити тим редоследом. У примеру испод 1с = трајање, 2с = кашњење, 3 = понављање.

animation: test 1s 2s 3 alternate backwards

Комбинујте трансформацију и анимацију

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Вишеструке анимације

Можете вредности одвојити зарезом да бисте на селектору декларирали више анимација.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Кораци ()

Функција степс () контролише тачно колико кључних кадрова ће се приказати у временском оквиру анимације. Рецимо да изјавите:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Ако у анимацији користите кораке (10), побринуће се да се само 10 кључних кадрова догоди у задатом времену.

.move ( animation: move 10s steps(10) infinite alternate; )

Математика тамо лепо функционише. Сваке секунде, елемент ће се померати 10пк улево и 10пк надоле, до краја анимације, а затим заувек уназад.

Ово може бити сјајно за спритесхеет анимацију попут ове демонстрације симураиа.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
4 * 5 * 10 12 5.1 *

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 4 * 6,0-6,1 *

Више ресурса

  • МДН Документи
  • МДН: Коришћење ЦСС анимације
  • Могу ли да користим - подршка за прегледач
  • ВИДЕО: Увод у ЦСС анимације