Re-Creating the Porky Pig Animation from Looney Tunes in CSS

Last December I wrote an article in Dutch for the Fronteers blog on a fun bit of CSS I wrote that use 3D transforms to create a cool looking effect: Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. At the time, I was creating a resource of […]

The post Re-Creating the Porky Pig Animation from Looney Tunes in CSS first appeared on Kilian Valkhof.

Last December I wrote an article in Dutch for the Fronteers blog on a fun bit of CSS I wrote that use 3D transforms to create a cool looking effect: Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. At the time, I was creating a resource of 3D transforms examples so it was on my mind, and I decided to see if I could replicate that ‘coming out of the circles’ effect. Turns out I could!

After writing the Dutch article I reached out to CSS-Tricks to see if they would be interested in the English version of the article and they were! (It helped that it’s literally a CSS trick!).

So I rewrote the article in English and added a few sections (for example on Reduced motion and how we don’t actually need to remove all the animation, just reduce it.) and it’s now published.

You can read the full article over on CSS-Tricks here: Re-Creating the Porky Pig Animation from Looney Tunes in CSS, and see the end result below:

See the Pen
Pure CSS "That’s all folks" effect
by Kilian Valkhof (@Kilian)
on CodePen.

The post Re-Creating the Porky Pig Animation from Looney Tunes in CSS first appeared on Kilian Valkhof.


Print Share Comment Cite Upload Translate
APA
Kilian Valkhof | Sciencx (2024-03-29T08:34:59+00:00) » Re-Creating the Porky Pig Animation from Looney Tunes in CSS. Retrieved from https://www.scien.cx/2021/01/28/re-creating-the-porky-pig-animation-from-looney-tunes-in-css/.
MLA
" » Re-Creating the Porky Pig Animation from Looney Tunes in CSS." Kilian Valkhof | Sciencx - Thursday January 28, 2021, https://www.scien.cx/2021/01/28/re-creating-the-porky-pig-animation-from-looney-tunes-in-css/
HARVARD
Kilian Valkhof | Sciencx Thursday January 28, 2021 » Re-Creating the Porky Pig Animation from Looney Tunes in CSS., viewed 2024-03-29T08:34:59+00:00,<https://www.scien.cx/2021/01/28/re-creating-the-porky-pig-animation-from-looney-tunes-in-css/>
VANCOUVER
Kilian Valkhof | Sciencx - » Re-Creating the Porky Pig Animation from Looney Tunes in CSS. [Internet]. [Accessed 2024-03-29T08:34:59+00:00]. Available from: https://www.scien.cx/2021/01/28/re-creating-the-porky-pig-animation-from-looney-tunes-in-css/
CHICAGO
" » Re-Creating the Porky Pig Animation from Looney Tunes in CSS." Kilian Valkhof | Sciencx - Accessed 2024-03-29T08:34:59+00:00. https://www.scien.cx/2021/01/28/re-creating-the-porky-pig-animation-from-looney-tunes-in-css/
IEEE
" » Re-Creating the Porky Pig Animation from Looney Tunes in CSS." Kilian Valkhof | Sciencx [Online]. Available: https://www.scien.cx/2021/01/28/re-creating-the-porky-pig-animation-from-looney-tunes-in-css/. [Accessed: 2024-03-29T08:34:59+00:00]
rf:citation
» Re-Creating the Porky Pig Animation from Looney Tunes in CSS | Kilian Valkhof | Sciencx | https://www.scien.cx/2021/01/28/re-creating-the-porky-pig-animation-from-looney-tunes-in-css/ | 2024-03-29T08:34:59+00:00
https://github.com/addpipe/simple-recorderjs-demo