Animation Tool

CSS Spritesheet Editor

Upload

Use the default idle sheet or import another sprite.

Spritesheet Grid

Generate the grid, then tune the selected frame.

Shortcuts

Click the map first to edit frames with the keyboard.
Click map firstArrowsmoveShift10pxAlt + ArrowsresizeDeleteremove[ ]frames

Preview

Frame 1 of 56 at 8 FPS.

Frame 124x40 at 0,0

Map

Click a cell to select it, or click empty space to add a new frame.
100%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

Timeline

Review, reorder, duplicate, and delete frame cells.
Frame 124x40 at 0,0
Frame 224x40 at 24,0
Frame 324x40 at 48,0
Frame 424x40 at 72,0
Frame 524x40 at 96,0
Frame 624x40 at 120,0
Frame 724x40 at 144,0
Frame 824x40 at 0,40
Frame 924x40 at 24,40
Frame 1024x40 at 48,40
Frame 1124x40 at 72,40
Frame 1224x40 at 96,40
Frame 1324x40 at 120,40
Frame 1424x40 at 144,40
Frame 1524x40 at 0,80
Frame 1624x40 at 24,80
Frame 1724x40 at 48,80
Frame 1824x40 at 72,80
Frame 1924x40 at 96,80
Frame 2024x40 at 120,80
Frame 2124x40 at 144,80
Frame 2224x40 at 0,120
Frame 2324x40 at 24,120
Frame 2424x40 at 48,120
Frame 2524x40 at 72,120
Frame 2624x40 at 96,120
Frame 2724x40 at 120,120
Frame 2824x40 at 144,120
Frame 2924x40 at 0,160
Frame 3024x40 at 24,160
Frame 3124x40 at 48,160
Frame 3224x40 at 72,160
Frame 3324x40 at 96,160
Frame 3424x40 at 120,160
Frame 3524x40 at 144,160
Frame 3624x40 at 0,200
Frame 3724x40 at 24,200
Frame 3824x40 at 48,200
Frame 3924x40 at 72,200
Frame 4024x40 at 96,200
Frame 4124x40 at 120,200
Frame 4224x40 at 144,200
Frame 4324x40 at 0,240
Frame 4424x40 at 24,240
Frame 4524x40 at 48,240
Frame 4624x40 at 72,240
Frame 4724x40 at 96,240
Frame 4824x40 at 120,240
Frame 4924x40 at 144,240
Frame 5024x40 at 0,280
Frame 5124x40 at 24,280
Frame 5224x40 at 48,280
Frame 5324x40 at 72,280
Frame 5424x40 at 96,280
Frame 5524x40 at 120,280
Frame 5624x40 at 144,280