Build a simple GIF generator

Statusi: Closed
Çmimi: $25
Kandidaturat e marra: 7
Fituesi: abdeveloper4

Winner

Përmbledhja e konkursit

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.

Aftësi të rekomanduara

Winner

Posto një konkurs si ky

Vlerёsimi i punёdhёnёsit

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

richkingsford, United States.

Punimet mё tё mira nga ky konkurs

abdeveloper4 Pakistan

0
iambilal2912112 Pakistan

0
aabdalah011 Egypt

0
rksharmakapro India

0
hrshammo Bangladesh

0
abhshekyadav9506 India

0

Shiko mё shumё vepra

Këndi publik i sqarimeve

shailesh870771
- 1 vit më parë
.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 vit më parë
shailesh870771
- 1 vit më parë
.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 vit më parë
shailesh870771
- 1 vit më parë
here is tha code
- 1 vit më parë
shailesh870771
- 1 vit më parë
.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 vit më parë