Tiger Bird Webdesign: Moving Title With CSS Animation

Sunday, 1 February 2015

Moving Title With CSS Animation

The animation only works on your PC.
Reload the page if you want play the animation again.

You can create so many fantastic effects with the CSS animation property. In the example above, the alphabets are moving from the right to the left. Details of the animation property are explained here.

By changing the left property in @keyframes youranimation you can move the elements from the right to the left or vice versa. The value forwards means that it will apply the property values described in to{} after the animation is finished.

HTML and CSS Code

<html>
<head>
<style>
#title30t
{position:absolute;
left:1500px;
font-size:300%;
color:red;
-webkit-animation:movingtitle30a 3s linear 0s 1 normal forwards;
animation:movingtitle30a 3s linear 0s 1 normal forwards;
}

#title30i
{position:absolute;
left:1500px;
font-size:300%;
color:red;
-webkit-animation:movingtitle30b 3s linear 0.5s 1 normal forwards;
animation:movingtitle30b 3s linear 0.5s 1 normal forwards;
}

#title30t2
{position:absolute;
left:1500px;
font-size:300%;
color:red;
-webkit-animation:movingtitle30c 3s linear 1s 1 normal forwards;
animation:movingtitle30c 3s linear 1s 1 normal forwards;
}

#title30l
{position:absolute;
left:1500px;
font-size:300%;
color:red;
-webkit-animation:movingtitle30d 3s linear 1.5s 1 normal forwards;
animation:movingtitle30d 3s linear 1s 1.5 normal forwards;
}

#title30e
{position:absolute;
left:1500px;
font-size:300%;
color:red;
-webkit-animation:movingtitle30e 3s linear 2s 1 normal forwards;
animation:movingtitle30e 3s linear 2s 1 normal forwards;
}

@-webkit-keyframes movingtitle30a{
from{left:1500px;}
to{left:20px;}
}

@keyframes movingtitle30a{
from{left:1500px;}
to{left:20px;}
}

@-webkit-keyframes movingtitle30b{
from{left:1500px;}
to{left:50px;}
}

@keyframes movingtitle30b{
from{left:1500px;}
to{left:50px;}
}

@-webkit-keyframes movingtitle30c{
from{left:1500px;}
to{left:75px;}
}

@keyframes movingtitle30c{
from{left:1500px;}
to{left:75px;}
}

@-webkit-keyframes movingtitle30d{
from{left:1500px;}
to{left:110px;}
}

@keyframes movingtitle30d{
from{left:1500px;}
to{left:110px;}
}

@-webkit-keyframes movingtitle30e{
from{left:1500px;}
to{left:140px;}
}

@keyframes movingtitle30e{
from{left:1500px;}
to{left:140px;}
}

</style>
</head>
<body>

Tiger Bird Webdesign

Sunday, 1 February 2015

Moving Title With CSS Animation

HTML and CSS Code

No comments:

Post a Comment