CSS Animation Examples

If you desire to have animations created by Solution Smith we will need a screenplay of the desired animation. Care should be taken that animations are done such that animations do not turn into a three-ring circus (unless that is the desired effect). The screenplay specifies the when, what, and where of each animation.

Electric Pulse Animated Text Using CSS

Electric Pulse effect using keyframes and mix-blend-mode.

Drawing Lines Effect SVG and CSS Animation

CSS Animation applied to SVG line art can be used to create the perception of a line being draw. The effect draws attention to the line, which can continue and to tell a story.

Animated Steam or Smoke effect

Steam is associated with hot food or coffee. Animation attracts attention to focus on what and where the movement is coming from. Steam also looks like smoke, and smoke is a subliminal, where there is smoke there is fire and fire is something that needs immediate attention. Be aware, an animated subliminal is likely to attract attention away from other content on the page, which is good when your content is competing for attention against other content.

Pixel art (game sprites) animated with CSS

Retro game design uses a series of images or sprites to create an animated character. Web pages or HTML5 games can use the same technique. The advantage of using CSS to display the sprites is CSS is non-blocking for user interactions, and can be controlled via javascript. This type of animation in the browser is not resource intensive and the browser can take advantage of any available graphics processor.

Do It Yourself

News Worthy

CSS DIY Animations

What you need to create animations

You need to know what CSS Properties can be animated.

A screenplay of the desired animation is necessary to reduce coding time. The screenplay specifies the when, what, and where of each animation.

What is the specific element with the animation rule applied? The animation rule has the following properties.

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
Keyframes

A rule named by animation-name has specific keyframe points for each CSS property being animated.

Any number of elements can be animated at the same time. Each element is animated separately being synchronised only by the timing of the animations (animation-delay).