It’s Always Sunny with CSS Animations
I first heard about Codepen when Tim Holman came to speak to our web development class at the Flatiron school. His talk mainly consisted of a showcasing of his creative works, from a simple elevator scroll to top script to the beautiful Aquatilis website. He reminded me that the primary reason I developed an interest in building websites in high school was as a creative outlet. After Tim’s talk, I poked around Codepen a bit, mostly maintaining a healthy curiosity. Happy to look from afar, but not very motivated to dive into things.
And then Jess - one of our instructors - showed us this very, very cool animated snow fox.
All with CSS?! I had to figure out how. Naively, I forked the pen, thinking I’d change some things around and know everything there was to know about animating cute CSS animals, and was promptly put back in my place by the 1473 lines of css in this monster of a thing.
So I decided to scale back and ask Google: 1) How do I create shapes with CSS? and 2) How do I make things move?
Most of the shapes in the snow fox above are achieved with playing with border radius. For example:
CSS:
.shape{ width: 200px; height: 200px; border-top-left-radius: 100px; border-bottom-right-radius: 100px; background-color: #000;}
So that’s pretty cool. By being able to round out edges to rectangular divs, you can make circles and eventually any shape you want by strategic layering.
CSS uses the @keyframe rule to manage animation code. Basically, adding @keyframes transitions you from one set of CSS rules to another.
@keyframes animate{ 0%{ top:0px; left: 0px; background-color: #8A54CE; } 100%{ top: 50px; left: 100px; background-color: #54A9D5;} } .shape{ animation: animate 2s infinite alternate-reverse;}
The keyframes can go from 0-100%, with 0 being the start and 100 being the end of the animation. In this particular example, the div with the class “shape” starts off with the top/left position at 0px and shifts over 50px down and 100px to the right. The background also gradually changes. This animation can be made more complex by adding more elements at different percentages.
@keyframes animate{ 0%{ top:0px; left: 0px; background-color: #8A54CE; transform: skewY(20deg); } 50%{ top: 0px; left: 100px; transform: skewY(-20deg); } 100%{ top: 50px; left: 100px; background-color: #54A9D5;} }
Once you figure out your basic animation, you can assign it to an element:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];
Here’s a simple sunset that I made after I got the basics down:
Here’s the link to the codepen: http://codepen.io/5ftwndr/pen/VpzGKx
And here’s a really cool beginner tutorial for anybody interested: https://robots.thoughtbot.com/css-animation-for-beginners
