Build a simple GIF generator

ステータス: Closed
賞金: $25
受け取ったエントリー: 7
優勝者: abdeveloper4

Winner

コンテスト概要

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.

推奨スキル

Winner

このようなコンテストを投稿する

採用者フィードバック

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

richkingsford, United States.

このコンテストのトップエントリー

abdeveloper4 Pakistan

0
iambilal2912112 Pakistan

0
aabdalah011 Egypt

0
rksharmakapro India

0
hrshammo Bangladesh

0
abhshekyadav9506 India

0

エントリーをもっと表示

公開説明ボード

shailesh870771
- １年前
.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;
}
}
- １年前
shailesh870771
- １年前
.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;
}
}
- １年前
shailesh870771
- １年前
here is tha code
- １年前
shailesh870771
- １年前
.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;
}
}
- １年前