How can I export CSS animation as animated PNG, gif, or WEBP *with transparency*?

user_470749 0
Viewed 2297

Press "Run code snippet" below to see the animated loading spinner that I want to save.

I want to replace all green colors with transparency.

Also, I'd like the animation to loop perfectly.

I tried recording a screen capture video using OBS and then uploading to https://ezgif.com/video-to-gif and using the "Replace color with transparency" feature, but it didn't remove any green color at all.

Also, if exporting canvas animations is easier than capturing CSS animations, I'd accept an answer that shows me how.

body {
  display: flex;
  overflow: hidden;
  height: 100vf;
  padding: 0;
  margin: 0;
  background-color: #090;
}
.container {
  background-color: #0c0;
  height: 500px;
  width: 500px;
}
.sym {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(white 50%, black 0);
  animation: r 8s linear infinite;
}
.sym:before, .sym:after {
  --i: 0;
  position: absolute;
  top: 25%;
  right: calc((1 - var(--i))*50%);
  bottom: 25%;
  left: calc(var(--i)*50%);
  border: solid 16.6666666667px hsl(0, 0%, calc(var(--i)*100%));
  transform-origin: calc(var(--i)*100%) 50%;
  transform: scale(0.5);
  background: hsl(0, 0%, calc((1 - var(--i))*100%));
  border-radius: 50%;
  animation: s 4s ease-in-out calc(var(--i)*-4s) infinite alternate;
  content: '';
}
.sym:after {
  --i: 1;
}
@keyframes s {
  to {
transform: scale(1.5);
  }
}
@keyframes r {
  to {
transform: rotate(1turn);
  }
}
/* from https://codepen.io/thebabydino/pen/aJPMre/ */
<body>
<div class='container'>
 <div class='sym'></div>
</div>
</body>

css-animations animated-gif animation css
1 Answers

I used OBS to capture a video of my browser as mp4.

Then I used ffmpeg like this to replace the green chroma key color with transparency and save as an animated gif file:

ffmpeg -t 9 -i screenCapture.mp4 -filter_complex "[0:v]colorkey=0x2dd103:0.3:0.5,format=yuva420p,crop=500:500:6:427,split[v0][v1];[v0]palettegen[p];[v1][p]paletteuse,setpts=0.1*PTS" -r 100 final.gif

Note that I think -t 9 and setpts=0.1*PTS and -r 100 should combine in a way that affects whether an animation is captured precisely from start to end, but I haven't mastered it.

So the remaining problems are to make sure that the gif loops seamlessly (which I think will be possible by removing superfluous frames via RealWorld Paint) and to make sure that the animation speed is appropriate in PowerPoint 2013.

(I'd still prefer to accept a cleaner, more convenient answer, as this approach is time-consuming and error-prone.)

user_4707490
Related