CIBDWBB – Ep. 12 – Animating Columns

How to animate elements with Soul Magic. How to animate columns with @keyframes CSS. How to really get spicy with your web design.

Subscribe to us on Youtube

This episode builds upon last weeks epicness. We are going to be taking our finished design and imaging elements. Fun!

We will be using two tools to animate our design. SoulMagic and @keyframes in CSS. The first tool SoulMagic we use to show off how awesome it is and makes basic animation super spicy and easy. With SoulMagic we can do a lot of animation properties in a short amount of time.

The second tool that we will use for animation is native CSS – @keyframes. While @keyframes may take a little longer than a tool like SoulMagic, utilizing this method empowers you to use CSS and not a plugin. We will learn how to stagger intro animations and have a little fun.

Enjoy animating your designs!

Tools Used

A great resource for CSS animation: https://css-tricks.com/almanac/properties/a/animation/

Share this article
Facebook
Twitter
LinkedIn
Pinterest

Subscribe to our Design, Art, Life Email Newsletter

Related ish...

Design Blog     Studio (Coming Soon)

Tickyboom is a graphic design studio that specializes in illustration, brand identity, and web design. We are a husband and wife duo that love to equip others to flourish through design.