Animacja i krzywe Bézier’a

parę fajnych narzędzi do zrozumienia i opracowania krzywej do animacji:

• cubic-bezier.com
• jasondavies.com/animated-bezier/
• developer.mozilla-animation-timing-function

 

właściwości animacji:

• animation-name
• animation-duration – czas trwania animacji np 3s
• animation-timing-function – funkcja samej animacji, w jaki sposób element odtwarza animację w czasie
• animation-delay – opóźnienie wykonania animacji w s np 3s
• animation-iteration-count – ile razy animacja zostanie odtworzona
• animation-direction
• animation-fill-mode –
  • backwards – ustawia stan 0 przed zaczęciem animacji
• animation-play-state

 

nieprzyjemny efekt 'skakania’ animacji można zniwelować, nadając rodzicowi backface-visibility: hidden