1

I'm new in the field of css and javascript. I'm trying to make animation images for my project. here is a one example of my animation.

`<body> <div class="firstDiv"> <div class="firstBaby"> <div class="babyDiv"></div> </div> </div> <button class="btnDown">Download</button> </body>

*{ margin: 0; padding: 0; box-sizing: border-box; }

body{ width: 100%; height: 100vh; } .firstDiv{ width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: blue; animation: myAnim 1s linear infinite;

} .firstBaby{ width: 300px; height: 300px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: blueviolet; animation: myAnim 1s linear infinite;

} .babyDiv{ width: 200px; height: 200px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: plum; animation: myAnim 1s linear infinite; }

.btnDown{ position: absolute; bottom: 0px; left: 50%; padding: 20px 5px; border: none; background-color: wheat; color: crimson; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; }

@keyframes myAnim{ 0%{ background-color: saddlebrown; } 50%{ background-color: inherit; } 100%{ background-color: lightcoral; } } `

I want to let user to download this animation as a gif image by clicking on download button with pure javascript. how to do it please help. thanks in advance. I have tried dom-to-image trick here by changing png to gif, but it's not working.

I'm new in the field of css and javascript. I'm trying to make animation images for my project. here is a one example of my animation. `<body> <div class="firstDiv"> <div class="firstBaby"> <div class="babyDiv"></div> </div> </div> <button class="btnDown">Download</button> </body> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; } .firstDiv{ width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: blue; animation: myAnim 1s linear infinite; } .firstBaby{ width: 300px; height: 300px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: blueviolet; animation: myAnim 1s linear infinite; } .babyDiv{ width: 200px; height: 200px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: plum; animation: myAnim 1s linear infinite; } .btnDown{ position: absolute; bottom: 0px; left: 50%; padding: 20px 5px; border: none; background-color: wheat; color: crimson; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; } @keyframes myAnim{ 0%{ background-color: saddlebrown; } 50%{ background-color: inherit; } 100%{ background-color: lightcoral; } } ` I want to let user to download this animation as a gif image by clicking on download button with pure javascript. how to do it please help. thanks in advance. I have tried dom-to-image trick here by changing png to gif, but it's not working.

No comments, yet...