CSS Animations

Most modern browsers support CSS animations, older browsers which don’t will show the element without the animation.

CSS Typewriter Effect

Welcome to my website 

In this example we need to state how many characters are contained within the element that is to have the typewriter effect applied within the CSS

The bold number contained within this line in the CSS needs changing:-
animation:typing 17s steps(21, end), blink-caret 1s step-end infinite;

HTML

<h1 class="animation-1">Welcome to my website<span>&nbsp;</span></h1>

CSS

@-webkit-keyframes typing 
{
	from { width: 100% }
	to { width:0 }
}
@-webkit-keyframes blink-caret 
{
	from, to { border-color: transparent }
	50% { border-color: #000 }
}                         
@-moz-keyframes typing 
{
	from { width: 100% }
	to { width:0 }
}                        
@-moz-keyframes blink-caret 
{
	from, to { border-color: transparent }
	50% { border-color: #000 }
}                       
.animation-1 
{ 
	font-family:"Courier New", Courier, monospace;
	position: relative; 
	float: left;
	font-size:24px;
	padding-right:3px;
}                                                            
.animation-1 span 
{
	position:absolute;
	top:0;
	right:0;
	width:0;
	background: #FFF;
	border-left: 3px solid #000;                             
    animation: typing 17s steps(21, end), blink-caret 1s step-end infinite;
    -webkit-animation: typing 17s steps(21, end), blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(21, end), blink-caret 1s step-end infinite;
}

Welcome Chris 

Multiple elements with the same class 

In this example we make use of jQuery to find out how many characters are contained within the element.

HTML

<h1 class="animate-text">Welcome Chris<span>&nbsp;</span></h1>
<p class="animate-text">Multiple elements with the same class<span>&nbsp;</span></p>

CSS

@-webkit-keyframes typing 
{
	from { width: 100% }
	to { width:0 }
}
                           
@-webkit-keyframes blink-caret 
{
	from, to { border-color: transparent }
	50% { border-color: black }
}
@-moz-keyframes typing 
{
	from { width: 100% }
	to { width:0 }
}
@-moz-keyframes blink-caret 
{
	from, to { border-color: transparent }
	50% { border-color: black }
}
.animate-text
{ 
	font-family:"Courier New", Courier, monospace;
	position: relative; 
	float: left;
	font-size:16px;
	padding-right:3px;
}
.animate-text span
{
	position:absolute;
	top:0;
	right:0;
	width:0;
	background: #FFF;
	border-left: 3px solid #000;
}

jQuery

$('.animate-text').each(function(index, value){		
var char_count = $(this).text().length;
$(this).find('span').css("animation", "typing 20s steps(" + (char_count-1) + ", end), blink-caret 1s step-end infinite")
});

Background Colour Fading Effect

Using CSS animation this will change the above background colour from dark grey to red

HTML

<div class="animation-3">Welcome to my website</div>

CSS

.animation-3
{
    display:block;
    line-height:3;
    background-color:#000;
    color:#FFF;	
    text-align:center;
    animation: colour-fade 10s infinite;
}

@keyframes colour-fade 
{
    0% 
    {
    	background-color: #222222;
    }
    50% 
    {
    	background-color: #FF0000;
    }
    100% 
    {
    	background-color: #222222;
    }
}

Element Resizing

Using CSS animation this will scale the above element

HTML

<div class="animation-4">Welcome to my website</div>

CSS

.animation-4
{
    display:block;
    line-height:300px;
    background-color:#000;
    color:#FFF;	
    text-align:center;
    border-radius: 50%;
    width:300px;
    height:300px;
    animation: enlarge 3s alternate infinite;
}
@keyframes enlarge 
{
    0% 
    {
    	transform: scale(.8);
    }
    100% 
    {
    	transform: scale(1);
    }
}

Dual Animation : Background Fade & Slide

This uses dual animation, in which the first animation will slide the element side to side, whilst the second animation will change the background colour.

HTML

<div class="animation-5">Welcome to my website</div>

CSS

.animation-5
{
    display:block;
    line-height:300px;
    background-color:#000;
    color:#FFF;	
    text-align:center;
    border-radius: 50%;
    width:300px;
    height:300px;
    margin-left:150px;
    animation: colour-fade-5 3s ease infinite alternate, slide-5 6s linear infinite alternate;
}
@keyframes colour-fade-5
{
    0% 
    {
    	background-color: #222222;
    }
    50% 
    {
    	background-color: #FF0000;
    }
    100% 
    {
    	background-color: #222222;
    }
}
@keyframes slide-5 
{
    0%
    {
    	transform: translate(150px, 0);
    }
    100% 
    {
    	transform: translate(-150px, 0);
    }
}

Element Rotate

Using CSS animation this will rotate the above element along with having another animation running which will change the background colour

HTML

<div class="animation-6">Welcome to my website</div>

CSS

.animation-6
{
    display:block;
    line-height:300px;
    background-color:#000;
    color:#FFF;	
    text-align:center;
    border-radius: 50%;
    width:300px;
    height:300px;
    margin-left:150px;
	animation: colour-fade-6 6s ease infinite alternate, rotate-6 4s linear infinite alternate;
}
@keyframes colour-fade-6
{
    0% 
    {
    	background-color: #222222;
    }
    50% 
    {
    	background-color: #FF0000;
    }
    100% 
    {
    	background-color: #222222;
    }
}
@keyframes rotate-6 
{
    0%
    {
    	transform: rotate(0);
    }
    50%
    {
    	transform: rotate(-25deg);
    }	
    100% 
    {
    	transform: rotate(25deg);
    }
}

Delayed Animation

• Element 1
• Element 2
• Element 3
• Element 4

In this example each li of the unordered list will shrink via CSS animation, which a delay for each li.

HTML

<ul class="animation-7">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>

CSS

.animation-7
{
    display:block;
    list-style-type:none;
}
.animation-7 li
{
    background-color:#F00;
    color:#FFF;	
    text-align:center;
    border-radius: 50%;
    width:200px;
    height:200px;	
    line-height:200px;
    display: inline-block;
    animation: shrink-7 3s alternate infinite;	
}
.animation-7 li:nth-child(2)
{
	animation-delay: 1s;
}
.animation-7 li:nth-child(3)
{
	animation-delay: 2s;
}
.animation-7 li:nth-child(4)
{
	animation-delay: 3s;
}
@keyframes shrink-7
{
    0% 
    {
    	transform: scale(.8);
    }
    100% 
    {
    	transform: scale(1);
    }
}