CSS Animations
CSS allows animation of HTML elements without using JavaScript or Flash!
In this chapter you will learn about the following properties:
Learn how to create a glowing text with CSS. Try it Yourself » Use the text-shadow property to create the neon light effect, and then use animation together with keyframes to add the repeatedly glowing effect. Easy Glow Effect In Pure CSS/CSS3 – Glowing.css. Demo Download. Glowing.css is a lightweight CSS library which applies a glow effect to any DOM objects on mouse hover. Based on CSS3 transform, filter, animation and transition properties. Css Text Glow Effect Animate Overview. CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. Multi-step animations and transitions are fun little tricks we have at our disposal to create rich, dynamic movement in CSS. The example of an equalizer in this post is a practical application but there are many other ways that multi-step transitions can be used. CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS. What are CSS Animations? An animation lets an element gradually change from one style to another. The same animation effect as above.
Making a glowing, crackling fire effect using only html and CSS animations. Let’s use some CSS3 animation magic and make the fire glow! Then animate the. Css Text Glow Effect Animate Overview. CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features.
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Browser Support for Animations
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
Browser Specific Prefixes
Some older browsers need specific prefixes (-webkit-) to understand the animation properties:
Example
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
What are CSS Animations?
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the 'example' animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from 'red' to 'yellow':
Example
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Css Text Outer Glow
Note: The animation-duration property defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds).
In the example above we have specified when the style will change by using the keywords 'from' and 'to' (which represents 0% (start) and 100% (complete)).
It is also possible to use percent. By using percent, you can add as many style changes as you like.
CALATORIA CRESTINULUI PDF - 22 Nov More Pilgrim's Progress Videos (English only) PART 1 of 4 - AUDIO STORY with PICTURES from the book. PART 2 of 4 PART 3 of 4 - AUDIO. Calatoria-crestinului.pdf - Free ebook download as PDF File (.pdf) or read book online for free. Calatoria crestinului pdf free.
The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:
Example
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:
Example
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Delay an Animation
The animation-delay property specifies a delay for the start of an animation.
The following example has a 2 seconds delay before starting the animation:
Example
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds.
In the following example, the animation will start as if it had already been playing for 2 seconds:
Example
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Set How Many Times an Animation Should Run
The animation-iteration-count property specifies the number of times an animation should run.
The following example will run the animation 3 times before it stops:
Example
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
The following example uses the value 'infinite' to make the animation continue for ever:
Example
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
The animation-direction property can have the following values:
normal- The animation is played as normal (forwards). This is defaultreverse- The animation is played in reverse direction (backwards)alternate- The animation is played forwards first, then backwardsalternate-reverse- The animation is played backwards first, then forwards
The following example will run the animation in reverse direction (backwards):
Example
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
The following example uses the value 'alternate' to make the animation run forwards first, then backwards:
Example
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
The following example uses the value 'alternate-reverse' to make the animation run backwards first, then forwards:
Example
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Specify the Speed Curve of the Animation
The animation-timing-function property specifies the speed curve of the animation.
The animation-timing-function property can have the following values:
ease- Specifies an animation with a slow start, then fast, then end slowly (this is default)linear- Specifies an animation with the same speed from start to endease-in- Specifies an animation with a slow startease-out- Specifies an animation with a slow endease-in-out- Specifies an animation with a slow start and endcubic-bezier(n,n,n,n)- Lets you define your own values in a cubic-bezier function
The following example shows the some of the different speed curves that can be used:
Example
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Css Text Glow Effect Animation
Specify the fill-mode For an Animation
CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.
The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
The animation-fill-mode property can have the following values:
none- Default value. Animation will not apply any styles to the element before or after it is executingforwards- The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)backwards- The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay periodboth- The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
The following example lets the <div> element retain the style values from the last keyframe when the animation ends:
Example
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
The following example lets the <div> element get the style values set by the first keyframe before the animation starts (during the animation-delay period):
Example
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
The following example lets the <div> element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:
Example
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Animation Shorthand Property
The example below uses six of the animation properties:
Example
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
The same animation effect as above can be achieved by using the shorthand animation property:
Example
animation: example 5s linear 2s infinite alternate;
}
Test Yourself with Exercises!
CSS Animation Properties
The following table lists the @keyframes rule and all the CSS animation properties:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| 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 |
You can make some pretty dazzling text effects with basic CSS and a few lines of JavaScript. These effects range from text display animations to 3D rotations or anything else you can imagine.
And in this post I’ve cataloged 10 of the coolest examples from around the web showcasing what you can do with just a little bit of stylized text and CSS code.
You might also like: CSS Animation Tools, Frameworks & Tutorials.
1. Title Animation
This animated title effect by Robin Treur follows the style of many movies or video games. The letters take on a protruding 3D effect using CSS3 text shadows along with a slight diagonal slant.
The fade-in animation style reminds me of classic movies from the 1930s with the same slanted text. Everything is controlled through CSS but the “restart” button is built using JavaScript. This way you can play the animation many times over to get a better look.
2. Shattering
Creating broken shattering text is a simple task with tools like After Effects, but creating a text shatter animation with code is a whole lot tougher, making this pen by Arsen Zbidniakov quite impressive.
The text is actually built using SVG shapes which makes the animation process a little easier. This also means you can’t select, copy, or interact with the text like normal.
But you can add a similar effect to your site if you use it for a logo or another non-interactive page element.
3. Twisted Letters
Developer Mamun Khandaker put together this collection of twisted letter animations. Each animation style has a different name and you can browse through them all in this one pen.
I could see these text effects used on landing pages or homepages for a tool/webapp. These immediately grab attention and they leave a lasting impression on the visitor. Plus they’re all made with 100% pure CSS and super easy to tweak.
4. Pixel Alphabet
This unique animated pixel effect is definitely strange, yet oddly mesmerizing. It relies mostly on JavaScript and was created by developer Georgi Nikoloff as a way to play with the HTML5 canvas element.
It uses Noto Serif as a font base and converts letters into malleable elements inside the canvas element. JavaScript breaks up the letters into smaller dots and these form the basis of the animation.
I can’t say this would have much practical use but it’s a testament to how far web animation has come.
5. Typing Carousel
This effect is notoriously popular on small portfolios and agency websites. The typing text animation often appears in a site’s header and it mimics the look of someone typing in a word processor.
Everything is contained inside one element with a good mix of CSS and JavaScript animation. Sometimes you’ll see websites use this to list descriptions of their work, or their history, or clients they’ve worked with.
It’s definitely a fun effect when used in moderation. Since only one word is visible at a time it does limit the readability of the page, but when used sparingly this is a very cool effect that anyone can copy.
6. Tyger Tyger
Borrowing words from the William Blake poem “The Tyger”, this very unique animation by Joseph Martucci really grabs your attention.
The focus here is not so much on the content, but rather on the typographic styles and animations. Each “segment” of the text has its own style with text outlines and glowing effects. It’s a great example of how you can style a homepage to animate text sequentially using setTimeout().
7. Snap SVG
The open source Snap.svg library lets anyone create high-resolution SVG images with just a bit of code. This is far easier than learning a program like Illustrator and it lets you animate just like this fun example created by Alexis Blondin.
All the letters are created dynamically through JavaScript including the random characters used in the animation. Modern SVG support is huge and these image types can radically change how we build websites in the coming years. This Snap.svg animation is just one example and it’s definitely a cool one.
8. Bracket Animation
Here’s another fairly common text animation technique which I see all the time. It uses brackets with rotating text almost like a rolodex on the page.
This animation mimics the typing carousel effect I mentioned earlier, except this can be made with just CSS. It relies on a custom looping animation that moves from one CSS keyframe to another, each frame displaying a different word or phrase in the rotating text.
I find this effect much subtler and easier to read on a homepage. If you’re looking for some cool text effects for your homepage this would be an excellent choice.
9. Unbreakable Kimmie Schmidt
This sweet logo effect was borrowed from the Netflix series “Unbreakable Kimmie Schmidt”. Everything is created with CSS including the text styles and the custom animations.
The page body has a class which initiates the animation, and this class is appended to the page using JavaScript. From there it’s all pure CSS. It mostly uses a bunch of transforms to create the surprisingly realistic bouncing effect.
It’s yet another example of how much CSS3 can do if you know how to use it.
10. Filling SVG Text
Lastly we come to this very unique SVG filler animation using a mix of box shadows and the CSS stroke property.
This text is built entirely with SVGs but it’s also selectable so you can copy/paste letters like regular text. It’s fully compliant with all browsers and the animation is subtle enough that it could fit into any website.
All of these text animations bring something new to the table. You may not find them all practical or usable in your own work, but they prove almost anything is possible with the right approach.