CSS Animations

I just read Ibrahim Nergiz’s article, “How to Use CSS Animations Like a Pro”                    URL https://stories.jotform.com/how-to-use-css-animations-like-a-pro-dfacc1e97338

CSS Animations are one of the coolest design features you can use to “spice up” a website design. Ibrahim Nergiz recently wrote a great article on JotForm titled How to Use CSS Animations Like a Pro. Nergiz details out Keyframes and the use of the Animation properties: Timing, Delay, Play State, Iteration Count, Direction, Fill Mode, and Will-Change.

The rise of pure CSS animations has been very beneficial for designers trying to dress up a website while keeping the load times fast. Using Keyframes to define the different stages of animation eliminates the need for extraneous code written in JavaScript, or (gasp) Flash. By using Keyframes a designer can define an animation stage and then specify that animation name directly in the CSS. This allows a website to still function quickly while adding extra flair with an animation.

Nergiz also discusses the “The Super 4”: position, scale, rotation, and opacity. These are the values that are commonly used when defining Keyframes to create animation effects. CSS Animation is achieved by changing the position, scale, rotation, and/or opacity of an object.  With these “Super 4” a web designer can easily create highly-customizable animations that add movement to their web pages. If you are a web designer looking to make your web pages stand out, I highly recommend checking out Nergiz’s article here.


3 thoughts on “CSS Animations

  1. This is a well written analysis of using keyframes with CSS Courtney. I took Web Design a while ago, and although I did not use the keyframing animations in my code, I read a lot about. It is funny when you come from a program like After Effects, down to a coding software like Dreamweaver, only to see the same concepts being used. CSS was a lot of fun, and something I could see myself pursuing more in the future.


  2. This was such a neat article! I really enjoyed the step-by-step in the beginning and all of the many example videos and pictures that are used throughout. CSS animation is a really cool thing and can definitely be used to draw attention or create fluidity on a website.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s