Gå till slutet

Animationer

Animation med Dynamic island på iPhone 14 Pro Onion skinning

Typer

  • gif-animationer

Filändelse

  • .gif
Animation

Förkortningar

  • RAF - requestAnimationFrame
  • FPS - frames per second
FlipaClip logotyp

Applikation

  • FlipaClip
Pacman animation Gartic phone logotyp Gartic phone logotyp Gartic phone logotyp

Spel

Giphy animation Giphy logotyp Tenor logotyp

Tjänster

CSS 3 logotyp Scalable Vector Graphics

Programmeringsspråk

Keyframes i CSS

@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Regel för CSS

animation: rotate 2s infinite linear;

Fler regler för CSS

animation-play-state: paused animation-play-state: running animation-delay: 18s

Inställningar för animation med hjälp av CSS

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Cubic-bezier i CSS

transition-timing-function: ease; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); transition-timing-function: ease-in-out; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transition-timing-function: ease-in; transition-timing-function: cubic-bezier(0.42, 0, 1, 1); transition-timing-function: ease-out; transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

Request Animation Frame med JavaScript

window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame }());

Ramverk för animationer med JavaScript

Företag

Github

Exempel på cinemagraph Seven segment display animation

Externa länkar

Animation med Mr. Burns som säger Excellent Stich animation Animerad bild på jorden Animerad bild på rymden Gå till början