Din webbläsare har JavaScript inaktiverat, aktivera det för full funktionalitet.

Gå till slutet

Uppdaterad 2023-02-21

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

Gartic phone logotyp

FlipaClip logotyp

Applikation

FlipaClip

Gartic phone logotyp

Gartic phone logotyp

Pacman animation

Spel

Gartic phone
Pacman

Giphy animation

Giphy logotyp

Tjänster

Giphy
Tenor

CSS 3 logotyp

Scalable Vector Graphics

Programmeringsspråk

CSS
SVG

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

GreenSock

Github

Exempel på cinemagraph

Länkar

Seven segment display animation

Externa länkar

Happens in adops.com

Greensock.com Tween lite

Webkit.org Blog 3D transforms

http://stackoverflow.com/questions/28122639/how-to-stop-animation-at-the-last-frame

Icons8.com Animated icons

Animation med Mr. Burns som säger Excellent

Stich animation

Animerad bild på jorden

Animerad bild på rymden

Gå till början