Анимација - ЦСС-трикови

Anonim

animationИмовина у ЦСС може да се користи за анимиране многим другим ЦСС својства, као што су color, background-color, height, или width. Свака анимација мора бити дефинисана @keyframesправилом ат које се затим позива са 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 лакоћа, лакоћа, лакоћа уласка, лакоћа изласка, линеарна, кубни-безиер (к1, и1, к2, и2) (нпр. кубни-безиер (0,5, 0,2, 0,3, 1,0))
animation-duration Ксс или Ксмс
animation-delay Ксс или Ксмс
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

Која својства се могу анимирати?

МДН има листу ЦСС својстава која се могу анимирати. Анимирана својства теже бојама и бројевима. Пример неанимираног својства је background-image.

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

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

Десктоп

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

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

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

Више информација

  • анимација на МДН-у
  • Коришћење ЦСС анимација
  • анимација на В3Ц
  • Јанк пропадање за боље перформансе приказивања
  • Веб анимација на послу
  • Пет начина за одговорно анимирање
  • Државни скокови, негативна кашњења, животињско порекло и још много тога
  • Покретање ЦСС анимација на пола пута
  • Анимације високих перформанси