DEV Community

Cover image for Green Screen Animation with CSS
Tayfun Erbilen
Tayfun Erbilen

Posted on

Green Screen Animation with CSS

Hello everybody, I'm a youtuber and recording web development lectures on my channel. A few days ago I decided to add "subscribe" animation into my videos but unfortunately my hardware wasn't enough to run video edit programs such as "Abobe Premier" or "Final Cut Pro".

So what did I do? I added "subscribe" template into my videos but how? I create a CSS template something like this;

And I added little animation to make sure looks pretty.


Demo: https://codepen.io/tayfunerbilen/pen/OJMOvZj

And I recorded this screen with Camtasia Studio, then edit with Camtasia Studio as well. Because Camtasia is working very well in my computer.

In camtasia, I used "Remove a Color" effect to remove green screen.

Alt Text

Here is the result, with low quality computer finally I can use "subscribe" template on my videos. Also I implemented more template such as "like" template. To take control is very easy and no need big video edit programs anymore :)

I'm not sure this is a good idea but it worked for me, may be one day it works for you. Happy coding!

Top comments (0)