Vis Ix Des1 Learning Diary 02

Intro to CSS animation

Animation is always one of the most important parts in Interaction Design and user experience. Good animation is the foundation of pleasing interaction. Web design should also have this kind of pleasing experience. On the very beginning I thought the web based animation are achieved using programming language like PHP or JavaScript, considering HTML in charges of forms while CSS in charges of style. But unexpectedly CSS can actually be utilized to generate simple yet beautiful animation, and that is something I'm really interested in. This is actually my very first encounter of CSS, and I had no previous experience of knowing CSS syntax. But in the “quick introduction to CSS animation", I learned some of the basic CSS syntax.

  • Creating the object in CSS, just simply adding attributes in to a grouped attributes which are all belonged to one single object, and the name of the object is at the very beginning of the group.
  • All the basic style and attributes that can be found in this tutorial are:
background-color,
width,
height,
animation-time,
animation-duration,
animation-iteration-count,
animation-timing-function

These attributes are generally the same comparing to iOS developing elements like view, except for withDuration, options and delay.

  • The method that CSS controls the animation is really similar to Swift as well as advanced video effect generating software such as Adobe AfterEffect and Flash. Keyframe is indeed a really efficient way to create animation with accuracy, and the percentage control that CSS provides can give designers more power over the actual process of animation, which is amazing.
  • The animation options that CSS provides is also kind of limited. There are only ease-in, ease-out, ease-in-out and liner. I’m anticipating to see built-in spring animation effect that can be utilized by designers easily with attributes including damping and etc. Also I’m anticipating to learn more about the customized timing options in animation that allow designers to create more accurate and interesting animation curve in their websites.

References:
A quick introduction to CSS animations by Per Harald Borgen

Comments
Write a Comment