CSS Animations for Web 🤝 Gemini 3.1 Pro!

What if you could generate this animation just by typing a sentence? Google just released Gemini 3. 1 Pro and this is how it compares against other LLMs like Sonnet, Opus, and GPT 5. 2. According to Google, Gemini 3. 1 Pro is a smarter and more capable baseline for complex problem solving. But what I really wanted to find out is that can it really oneshot high quality CSS animations by just typing in a text prompt. This video is not sponsored. So I searched for a random animation, paste it in chat GPT, then I asked it to write me a text prompt. I go to gemini. google. com, click on tools, select canvas, remember to choose pro, which this is the Gemini 3. 1 Pro. I pasted the screen recording of the reference animation and the text prompt that chat GPT wrote for me. To my surprise, it one-shot it and this animation is pure CSS code, which means that you can actually scale this animation to whatever size that you want and they'll remain crystal clear and they're smaller in file size compared to a video. To stress test it further, I literally just uploaded the screen recording of the animation that I'm trying to achieve and wrote this prompt and the result was this. Only one prompt. I think it's pretty good. You can even create a public sharable link and share it with anyone by clicking here. All right, let's try something else. For animating a mascot, I wanted to test if Gemini 3. 1 Pro can maintain consistent character throughout the entire animation. So, for demo purposes, I just went on Dualingo's brand guide and grabbed a screenshot of this owl mascot in different perspectives and wrote this prompt. Let's see what happens. This animation took about five minutes. As you can see, it still needs precise instructions and a couple tweaks in order to get what you want. Honestly, I kept running into bugs. It stops working halfway and I have to reenter my prompt. After a couple page refreshes and like a 15 minutes wait, here's the result. It couldn't replicate the original mascot. Then I wondered, what if I give the SVG of the mascot? Well, it's a little bit of a hit or miss right now. It removed one of Dual's legs, but overall, I'm genuinely impressed by how close Gemini 3. 1 Pro can get in one shot, especially for SVG and CSS where you get very crisp visuals, a very small file size, and code that you can actually tweak. But if you need pixel perfect art direction, real control, consistency, go with After Effects, RI and LO files. It takes more time, but it's definitely a more proper workflow that your team can repeat. I would treat Gemini 3. 1 Pro as a fast starting point. Maybe you could use it to like explore ideas, generate a first draft, and polish it with the tools that you already know. If you find this video helpful, let me know what other topics or tools that you would like me to cover. I know it's been a while and I hope to see you back in the next video. Bye.