ACHTUNG!


This is a simple CSS animation I created that makes a text element look like it is flashing. This was achieved through pure CSS and I will break down how I achieved this effect.

The inline code is as follows:
<span class="flash">ACHTUNG!</span>
As you can see, it is simply "ACHTUNG!" wrapped in a <span> tag assigned to the CSS class "flash."

To address the actual animation part, we need to address the CSS formatting which is placed in either an external stylesheet or within the <style> tag of the <head> section of your HTML page:
.flash {
font-size: 5em;
color: #FF0000;
background: #FFFF00;
border-radius: 0.1em;
animation: flash 0.5s infinite linear alternate;
-webkit-animation: flash 0.5s infinite linear alternate;
}

@keyframes flash {
0%	{color: #FF0000; background: #FFFF00;}
100%	{color: #FFFF00; background: #FF0000;}
}

@-webkit-keyframes flash {
0%	{color: #FF0000; background: #FFFF00;}
100%	{color: #FFFF00; background: #FF0000;}
}
The first part defines the preformatting styling of the "flash" class. The "color" and "background" styles assign the color of the text and the background color of the text regardless of any animation effects. Essentially this defines how the animation starts out. "font-size" obviously defines the size of the font. The border-radius style is there just to give the background rounded corners.

The animation style is what defines the actual animation properties. "flash" designates the name of the animation, so really you could name this anything. "0.5s" means that the animation lasts for half a second. "infinite" means the animation repeats infinitely. "linear" means the animation plays at the same speed for the duration of the animation. By default the animation starts slowly, then gets faster, then ends slowly. "alternate" means that the animation will play in reverse every even-numbered time that it plays. This makes the flashing transition seems less sudden than if it were to simply to play start to finish on infinite.

The @keyframes property defines the parts of the animation. The "flash" text after @keyframes is the name of the animation that this property is addressing, so if yu did not name your animation "flash" then you will need to change this to whatever you named it. With the keyframes property, you define how the animation will look at certain stages. For this animation I have only assigned how it should look at the beginning of the animation and at the end of the animation. CSS automagically fills in a seamless transition between the beginning and the end, however if you wanted the animation to look radically different throughout, you could assign looks at 20%, 25%, 50%, etc.

The "color" and "background" styles naturally set the font color and background color for the animation. The end colors have been set as the exact opposite to the start colors to make the flashing effect more intense.

The -webkit-animation and @-webkit-keyframes properties are added as Chrome and Safari do not natively support CSS animations yet, so without these properties added, the effect would only occur in Firefox and Internet Explorer. If you do not add the -webkit- properties, the text and background would be static and be defined from the ".flash" class, which is why it is a good idea to set your starting colors in the class definitions as well as at the animation start.

For more information, check out the w3schools guide for CSS animations.