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.
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).