css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged css animation

The illusion of life

During my study, I have read the book “The illusion of life” about the principles of movie animation. This book is written by Frank Thomas and Ollie Johnston in 1981. They were one of the first...

Watching and Learning Codyhouse's "Mastering CSS Transitions, Transforms & Animations"

I'm trying to watch 1 video a day, try to understand the code and duplicate the code shown in the video and then later brainstorm an idea that works around the feature that is taught and build...

UC Santa Cruz Billboard Animation...

UCSC Billboard Animation

CSS Animation. The music was just for fun. :)




CSS Cassette

Css Cassette

Designed a CSS Cassette using only HTML & CSS with recording kind of CSS animation. This is an inspiration...

Write animation

Text Animation Message Writing

Hello ! my first pen here, I forked Stephen Scaff's Pen "Transmission: Glowing Text Animation" and...

How to make a Zelda Fairy in CSS

I've been asked by a few people if I could write a tutorial for creating a fairy — based on my Zelda Fairy CSS animation.

Creating assets

Everyone's workflow will vary, but I like to hop...

Getting Started with CSS Animations

What Are CSS Animations?

You obviously know what an animation is - what I'm tryng to get at here are the different kinds of CSS Animations. There are the kind we already using without thinking - ...

Cookie-counter to stop css animation on second visit.

I need a cookie-counter that stops a css animation after the first visit. How is this done, I've found this code that i think might be close to what I need. But I'm new to javascript. can...

DVD Menu Screensaver from The Office Part 1

Recently I've been re-watching the US version of The Office. One of my favorite scenes is from the opening of the Launch Party episode. Michael is leading a meeting in the conference room while...

Expand Box Animation

In this article you will find how to design a expanding box animation using CSS and jQuery.

source code is given here :

[[[pen slug-hash='LJjRjE' height='300'...

CSS Animation Tutorial: A Cute Sleepy Ghost

Hey all! I wanted to share a ghost animation I made earlier this month for the CodePen Ghost Challenge. It’s a simple animation but here are the steps with some explanation. (Yay Web Tutorial...

Animation & CSS Image - Laptop

Animation & CSS Image - Laptop (Part 3 - Infinite Animation)

Level: Beginner

This year I participated in Codevember for the first time. My goal was to learn about css animation. This is a tutorial...

Css animation Or javascript

Animations can sometimes take the place of javascript and make it a little easier for us. for example:

dropdown menu



CSS Text Portrait Effect

Watch This video https://youtu.be/t6wM3oaQ3N0