BACK
BACK
BACK
Loading...

Blog / HowTos /  Using CSS Text Animation Effects on Your Website

January 21, 2016 - Cathy

Using CSS Text Animation Effects on Your Website

CSS Text Animation Effects

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints. CSS animations have three key advantages over traditional script-driven animation techniques:

  1. It is possible to create a simple CSS animation without having to know JavaScript
  2. CSS animations run well and the rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
  3. CSS animations let the browser control the animation sequence and the browser optimizes performance and efficiency

A CSS animation sequence is created by styling the element to be animated with the “animation” property or its sub-properties. The timing, duration, and other details of how the animation sequence should progress are configured in this way but the @keyframes at-rule is usedto configure the actual appearance of the animation.

css text animation effects

The sub-properties of the “animation” property are:

  • Animation-delay: Specifies a delay for the start of an animation
  • Animation-direction: Specifies whether an animation should play in reverse direction or alternate cycles
  • Animation-duration: Specifies how many seconds or milliseconds an animation takes to complete one cycle
  • Animation-fill-mode: Specifies a style for the element when the animation is not playing
  • Animation-iteration-count: Specifies the number of times an animation should be played
  • Animation-name: Specifies the name of the @keyframes animation
  • Animation-play-state: Specifies whether the animation is running or paused
  • Animation-timing-function: Specifies the speed curve of the animation

After the animation’s timing is configured the appearance of the animation has to be defined. This is accomplished by establishing two or more keyframes using the “@keyframes” at-rule.

Keyframes use a percentage to indicate the time during the animation sequence at which they take place with 0% indicating the first moment of the animation sequence and 100% indicating the final state of the animation. These two times have special aliases: from and to and both are optional. If from/0% or to/100% is not specified, the browser uses the computed values of all attributes to start or finish the animation.

MOBILUNITY

Some Simple CSS Text Animation Effects

The following are examples of some CSS text animation effects:

  • Making text slide across the browser window: This following styles the <p> element causing the text to slide in from off the right edge of the browser window:
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
  • Grow and shrink: Adding another keyframe to the last example can cause the headers font size to increase as it travels from right to left, then decrease back to the original size:
75% {
font-size: 300%;
margin-left: 25%;
width: 150%;
}
  • Repeat sequence: Use the animation-iteration-count property to make the animation repeat by indicating how many times to repeat. Use infinite to have the animation repeat indefinitely:
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
  • Additional control over animations: The CSS for the following animation will last for 3 seconds, be called “slidein”, repeat 3 times, and alternate direction each time. In the @keyframes, the width and margin-left are manipulated to make the element slide across the screen:
.slidein {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: 3;
animation-direction: alternate;
}
@keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
  • Adding animation event listeners: The following code configures the event listeners:
var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";
  • Receiving the events: Events get delivered to the listener() function, shown here:
function listener(e) {
var l = document.createElement("li");
switch(e.type) {
case "animationstart":
l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
l.innerHTML = "New loop started at time " + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(l)
}

The few CSS text examinations effects shown here are just scratching the surface of what you can do with CSS text animation. Text animations are useful for drawing attention to important information on your website and also for increasing visitor’s engagement. Practice with different shadow effect in CSS as well as combining effects to improve your CSS text animation skills.

If you require assistance with any of your CSS text animation effects, our team can give you a few hints!

Request a quote

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

5