Build a simple GIF generator

Status: Closed
Prize: $25
Entries Received: 9
Winner: abdeveloper4

Winner

Contest Brief

Here is a simple CSS GIF I made: https://jsfiddle.net/richkingsford/b942kxdc/169/

Using a free, stable, and legal GIF generator, please build and share a script (via JS Fiddle or something) that can capture a CSS animation.

25-30 frames per second (FPS), please. Attached is an acceptable example (I used Snagit to make it... but Snagit isn't scalable - I need to do this programmatically).

It should record the smallest space possible, but get all the animation in there (we're going to be generating a lot of GIFs and it'd be nice if they were small :D).

For this contest, please upload and submit the GIF you generated using your code.

Recommended Skills

Winner

Post a Contest Like This

Employer Feedback

“Abdul implemented the feedback we had. Excellent work. Thank you”

richkingsford, United States.

Top entries from this contest

abdeveloper4 Pakistan

0
iambilal2912112 Pakistan

0
aabdalah011 Egypt

0
princenayeem707 Bangladesh

0
rksharmakapro India

0
hrshammo Bangladesh

0
farhankha4548 Pakistan

0
abhshekyadav9506 India

0

View More Entries

Public Clarification Board

shailesh870771
- 1 month ago
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 1s ease-in-out infinite alternate;
}
@keyframes move {
0% {
top: 0px;
}
20% {
top: 50px;
}
25% {
top: 75px;
}
100% {
top: 200px;
}
}
- 1 month ago
shailesh870771
- 1 month ago
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 1s ease-in-out infinite alternate;
}
@keyframes move {
0% {
top: 0px;
}
20% {
top: 50px;
}
25% {
top: 75px;
}
100% {
top: 200px;
}
}
- 1 month ago
shailesh870771
- 1 month ago
here is tha code
- 1 month ago
shailesh870771
- 1 month ago
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 1s ease-in-out infinite alternate;
}
@keyframes move {
0% {
top: 0px;
}
20% {
top: 50px;
}
25% {
top: 75px;
}
100% {
top: 200px;
}
}
- 1 month ago