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
Ikon med logotyp för Gartic phone Ikon med logotyp för FlipaClip

Applikation

  • FlipaClip
  • Gartic phone
Logotyp för Gartic phone Logotyp för Gartic phone Animation av Pacman

Spel

Logotyp för GIPHY Ikon med logotyp för GIPHY Ikon med logotyp för tenor

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 }()); Logotyp för GSAP - GreenSock Animation Platform

Ramverk för animationer med JavaScript

Logotyp för SKYDANCE ANIMATION

Företag

Github

Exempel på cinemagraph

Länkar

Animation som föreställer en 7-segmentsdisplay

Externa länkar

Animation med Mr. Burns som säger Excellent Stich animation Animerad bild på jorden Animerad bild på rymden Animerad tjej som snurrar, men åt vilket håll? Gå till början