Анимация - CSS-трикове

Anonim

В animationимота в CSS може да се използва, за да анимирате много други CSS свойства, като например color, background-color, height, или width. Всяка анимация трябва да бъде дефинирана с @keyframesправилото at, което след това се извиква със animationсвойството, по следния начин:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Всяко @keyframesправило на правилото определя какво трябва да се случи в конкретни моменти по време на анимацията. Например 0% е началото на анимацията и 100% е краят. След това тези ключови кадри могат да бъдат контролирани или от стенографското animationсвойство, или от осемте му под-свойства, за да се даде по-голям контрол върху начина, по който тези ключови кадри трябва да бъдат манипулирани.

Под-свойства

  • animation-name: декларира името на @keyframesправилото за манипулиране.
  • animation-duration: продължителността на времето, необходимо на анимацията да завърши един цикъл.
  • animation-timing-function: установява предварително зададени криви на ускорение като easeили linear.
  • animation-delay: времето между зареждащия елемент и началото на анимационната последователност (страхотни примери).
  • animation-direction: задава посоката на анимацията след цикъла. По подразбиране се нулира за всеки цикъл.
  • animation-iteration-count: колко пъти трябва да се извърши анимацията.
  • animation-fill-mode: задава кои стойности да се прилагат преди / след анимацията.
    Например можете да настроите последното състояние на анимацията да остане на екрана или да го върнете към преди, когато анимацията е започнала.
  • animation-play-state: пауза / възпроизвеждане на анимацията.

След това тези под-свойства могат да се използват по следния начин:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

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

animation-timing-function лекота, лекота, лекота-навлизане, лекота-навлизане, линейна, кубичен-безие (x1, y1, x2, y2) (напр. кубичен-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs или Xms
animation-delay Xs или Xms
animation-iteration-count х
animation-fill-mode напред, назад, и двете, няма
animation-direction нормално, алтернативно
animation-play-state на пауза, бягане, бягане

Няколко стъпки

Ако анимацията има същите начални и крайни свойства, е полезно да разделите със запетая стойностите 0% и 100% вътре @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

Множество анимации

Можете да разделите стойностите със запетая, за да декларирате и множество анимации на селектор. В примера по-долу искаме да променим цвета на кръга, като @keyframeсъщевременно го бутаме от една страна на друга с друга.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

производителност

Анимирането на повечето свойства е проблем за ефективността, така че трябва да действаме внимателно, преди да анимираме каквото и да е свойство. Има обаче някои комбинации, които могат да бъдат анимирани безопасно:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Кои свойства могат да бъдат анимирани?

MDN има списък с CSS свойства, които могат да бъдат анимирани. Анимационните свойства са склонни към цветове и цифри. Пример за не анимационно свойство е background-image.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
4 * 5 * 10 12 5.1 *

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

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0-6,1 *

Повече информация

  • анимация на MDN
  • Използване на CSS анимации
  • анимация на W3C
  • Jank busting за по-добро представяне при изобразяване
  • Уеб анимация на работа
  • Пет начина да анимирате отговорно
  • Държавни скокове, отрицателни закъснения, анимационен произход и др
  • Стартиране на CSS анимации по средата
  • Анимации с висока производителност