Tiger Bird Webdesign: February 2015

Sunday, 15 February 2015

Master The Z-Index With The Purple Flower!

This purple flower might not be that spectacular but is a good example to explain the stack order of elements.

The stack order of elements is described by the CSS z-index property. An element with a higher value is shown in front of a lower valued element. Position properties (relative, absolute or fix) have to be assigned to elements in order to make the z-index work.

The flower is made of 3 parent elements with the following ids: purple_flower36, petal1 and petal5. The yellow center should be on top of the petals so we assign the highest z-index to it. By giving a lower z-index to the small petals (parent element is petal1) these are shown under the yellow dot. The big petals (parent element petal5) have the lowest z-index. The order of the child elements is also influencing the stack order. For example, petal3 is shown below petal4 although they have the same z-index 3 concluding the first element has a higher stack order than the second element.

Change the top/left value of #purple_flower36 and put the flower wherever you want!

HTML and CSS Code

#purple_flower36{
    position:relative;
    top:0px;
    left:0px;
    }

#center36{
    position:relative;
    top:115px;
    left:110px;
    width:20px;
    height:20px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#FFFF33;
    z-index:4;
    }
    
    #petal1{
    position:absolute;
    width:40px;
    height:40px;
    top:110px;
    left:110px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    z-index:3;
    }
    
    #petal2{
    position:absolute;
    width:40px;
    height:40px;
    left:10px;
    top:0px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(90deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(90deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(90deg);
    -webkit-transform-origin:0% 0%;
    z-index:3;
    }
 
    #petal3{
    position:absolute;
    width:40px;
    height:40px;
    top:15px;
    left:15px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(180deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(180deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(180deg);
    -webkit-transform-origin:0% 0%;
    z-index:3;
    }
    
    
    #petal4{
    position:absolute;
    width:40px;
    height:40px;
    top:20px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(270deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(270deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(270deg);
    -webkit-transform-origin:0% 0%;
    z-index:3;
    }
    
    #petal5{
    position:absolute;
    width:60px;
    height:60px;
    top:110px;
    left:100px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(0deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(0deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(0deg);
    -webkit-transform-origin:0% 0%;
    z-index:2;
    }
    
    #petal6{
    position:absolute;
    width:60px;
    height:60px;
    top:-15px;
    left:10px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(60deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(60deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(60deg);
    -webkit-transform-origin:0% 0%;
    z-index:2;}
    
     #petal7{
    position:absolute;
    width:60px;
    height:60px;
    top:-10px;
    left:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(120deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(120deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(120deg);
    -webkit-transform-origin:0% 0%;
    z-index:2;}
    
       #petal8{
    position:absolute;
    width:60px;
    height:60px;
    top:20px;
    left:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(180deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(180deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(180deg);
    -webkit-transform-origin:0% 0%;
    z-index:2;}
    
     #petal9{
    position:absolute;
    width:60px;
    height:60px;
    top:30px;
    left:20px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(240deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(240deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(240deg);
    -webkit-transform-origin:0% 0%;
    z-index:2;}
    
     #petal10{
    position:absolute;
    width:60px;
    height:60px;
    top:20px;
    left:0px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    background-color:#E62EE6;
    border:solid #660066 2px;
    transform:rotate(300deg);
    transform-origin:0% 0%;
    -ms-transform:rotate(300deg);
    -ms-transform-origin:0% 0%;
    -webkit-transform:rotate(300deg);
    -webkit-transform-origin:0% 0%;
    z-index:1;}
    </style>
  </head>
  <body>
    <div id="purple_flower36">
    <div id="center36">
</div>
<div id="petal1">
    <div id="petal2">
</div>
<div id="petal3">
</div>
<div id="petal4">
</div>
</div>
<div id="petal5">
    <div id="petal6">
</div>
<div id="petal7">
</div>
<div id="petal8">
</div>
<div id="petal9">
</div>
<div id="petal10">
</div>
</div>
</div>
</body>
  </html>

Friday, 13 February 2015

Glowing Green Neon Sign With CSS Animation

Open

Glow effects always look cool! The text glows with CSS animation.
Different blurring levels created with the text-shadow property create the effect above. The animation property sets the value of length, frequency, style, timing of the animation. Look for details here. In this example, the glowing effect should go one forever so we set the value to infinite. @keyframes describes the details of the initial and final status of the animation with the following syntax:

@keframes animation name {
from{;}
to{;}
}

HTML and CSS Code

<html>
<head>
<style>
 #bg35{
   position:relative;
   background-color:black;
   width:300px;
   height:200px;
   }
    
    #neon35{
    position:absolute;
    top:50px;
    left:50px;
    font-size:500%;
    text-shadow:
    2px 2px 5px #CCFF99,
    -2px -2px 5px #CCFF99,
    5px 5px 15px #ADFFAD,
    -5px -5px 15px #ADFFAD,
    5px 5px 50px #99FF66,
    -5px -5px 50px #99FF66;
    animation:blinking35 2s ease-out  0s alternate infinite;
    -webkit-animation:blinking35 2s ease-out  0s alternate infinite;
    }
    
    @keyframes blinking35{
    from{text-shadow:
    2px 2px 5px #CCFF99,
    -2px -2px 5px #CCFF99,
    3px 3px 15px #ADFFAD,
    -3px -3px 15px #ADFFAD,
    5px 5px 50px #99FF66,
    -5px -5px 50px #99FF66;
    }
    to{text-shadow:
    2px 2px 17px #CCFF99,
    -2px -2px 17px #CCFF99,
    1px 1px 15px #ADFFAD,
    -1px -1px 15px #ADFFAD,
    5px 5px 15px #ADFFAD,
    -5px -5px 15px #ADFFAD,
    5px 5px 100px #99FF66,
    -5px -5px 100px #99FF66,
       10px 10px 100px #99FF66,
    -10px -10px 100px #99FF66;}
    }
    
    
    @-webkit-keyframes blinking35{
    from{text-shadow:
   2px 2px 5px #CCFF99,
    -2px -2px 5px #CCFF99,
    3px 3px 15px #ADFFAD,
    -3px -3px 15px #ADFFAD,
    5px 5px 50px #99FF66,
    -5px -5px 50px #99FF66;}
    to{text-shadow:
       2px 2px 7px #CCFF99,
      -2px -2px 7px #CCFF99,
      1px 1px 5px #ADFFAD,
      -1px -1px 5px #ADFFAD,
      5px 5px 15px #ADFFAD,
      -5px -5px 15px #ADFFAD,
      5px 5px 100px #99FF66,
      -5px -5px 100px #99FF66,
       10px 10px 100px #99FF66,
      -10px -10px 100px #99FF66;}
    }
  </style>
  </head>
  <body>

Tuesday, 10 February 2015

Glowing Tabs and Boxes with CSS Animation and JavaScript

Glowing Tabs and Boxes with CSS Animation and JavaScript

Cats
Dogs
Monkeys

"Miau, miau," says the cat.

"Wuff, wuff," barks the dog.

"I need some bananas," says the monkey.

Create some glowing tabs and boxes with CSS animation and JavaScript!

If you click one of the tabs shown above the related text box will fade in into the front of the screen. As described in the previous posts we use the CSS animation property. This time the animation should fire when a tab is clicked so we use the JavaScript onclick event and assign to each tab a different function. Clicking a tab applies a specific value to the CSS animation property invoking the glowing effect. The JavaScript syntax is as follows:

document.getElementById("ID of the tab").style.WebkitAnimation="value details";
document.getElementById("ID of the tab").style.animation="value details";

If one tab is glowing the rest should be transparent therefore the other animation properties have no value describing with "". The same time a tab is glowing its related text box should also visible which is done by setting the z-index to "2". The syntax is document.getElementById("the ID of the box").style.zIndex="2";

HTML, CSS and JavaScript Code

<html>
  <head>
  <style>
   #ul33{
    list-style:none;
    position:absolute;
    text-align:center;
    font-weight:bold;
    top:10px;
    }
    
    #cats{
    width:80px;
    height30px;
    background-color:white;
    color:navy;
    text-shadow:1px 1px 5px navy;
    box-shadow:;
    margin:10px;
    padding:5px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    opacity:0.5; 
    visibility:visible;
    -webkit-animation:;
    animation:;
    }
    
    @-webkit-keyframes fadeIn33{
    from{box-shadow:0px 0px 0px;opacity:0.5;}
    to{box-shadow:1px 1px 30px #FFCCFF,-1px -1px 30px #FF00FF;opacity:1;visibility:visible;}
    }

@keyframes fadeIn33{
    from{box-shadow:0px 0px 0px;opacity:0.5;}
    to{box-shadow:1px 1px 30px #FFCCFF,-1px -1px 30px #FF00FF;opacity:1;visibility:visible;}
    }

#dogs{
    width:80px;
    height30px;
    background-color:white;
    text-shadow:1px 1px 5px navy;
    margin:10px;
    padding:5px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    opacity:0.5;
    }
    
     #monkeys{
    width:80px;
    height30px;
    background-color:white;
    text-shadow:1px 1px 5px navy;
    margin:10px;
    padding:5px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    opacity:0.5;
    }
    
    #box33{
    padding:10px;
    }
    
    #box33_1{
    position:absolute;
    padding:10px;
    top:35px;
    left:160px;
    width:250px;
    height:150px;
    background-color:white;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    opacity:0.5;
    z-index:;
    }
    
     #box33_2{
    position:absolute;
    padding:10px;
    top:35px;
    left:160px;
    width:250px;
    height:150px;
    background-color:white;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    visibility:hidden;
    z-index:;
    }
    
     #box33_3{
    position:absolute;
    padding:10px;
    top:35px;
    left:160px;
    width:250px;
    height:150px;
    background-color:white;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    visibility:hidden;
    z-index:;
    }
  </style>
  
  
  
  </head>
<body>
  <script>
    function highlight1(){
    document.getElementById("cats").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
    document.getElementById("cats").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
    document.getElementById("dogs").style.WebkitAnimation="";
    document.getElementById("dogs").style.WebkitAnimation="";
    document.getElementById("dogs").style.animation="";
    document.getElementById("monkeys").style.WebkitAnimation="";
    document.getElementById("monkeys").style.animation="";
    document.getElementById("box33_1").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
    document.getElementById("box33_1").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
    document.getElementById("box33_1").style.zIndex="2";
    document.getElementById("box33_2").style.WebkitAnimation="";
    document.getElementById("box33_2").style.animation="";
    document.getElementById("box33_2").style.zIndex="1";
    document.getElementById("box33_3").style.WebkitAnimation="";
    document.getElementById("box33_3").style.animation="";
    document.getElementById("box33_3").style.zIndex="1";
    }
    
   function  highlight2(){
   document.getElementById("cats").style.WebkitAnimation="";
   document.getElementById("cats").style.animation="";
   document.getElementById("monkeys").style.WebkitAnimation="";
   document.getElementById("monkeys").style.animation="";
   document.getElementById("dogs").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("dogs").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_1").style.WebkitAnimation="";
   document.getElementById("box33_1").style.animation="";
   document.getElementById("box33_1").style.zIndex="1";
   document.getElementById("box33_2").style.zIndex="2";
   document.getElementById("box33_2").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_2").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_3").style.WebkitAnimation="";
   document.getElementById("box33_3").style.animation="";
   document.getElementById("box33_1").style.zIndex="1";
   }
   
   function highlight3(){
   document.getElementById("monkeys").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("monkeys").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("cats").style.WebkitAnimation="";
   document.getElementById("cats").style.animation="";
   document.getElementById("dogs").style.WebkitAnimation="";
   document.getElementById("dogs").style.animation="";
   document.getElementById("box33_1").style.WebkitAnimation="";
   document.getElementById("box33_1").style.animation="";
   document.getElementById("box33_1").style.zIndex="1";
   document.getElementById("box33_2").style.WebkitAnimation="";
   document.getElementById("box33_2").style.animation="";
   document.getElementById("box33_1").style.zIndex="1";
   document.getElementById("box33_3").style.WebkitAnimation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_3").style.animation="fadeIn33 1s ease-out 0s 1 normal forwards";
   document.getElementById("box33_3").style.zIndex="2";
   }
  </script>
  
  
  <div id="bg33">
    
  <ul id="ul33">
<li id="cats" onclick="highlight1()">Cats</li>
<li id="dogs" onclick="highlight2()">Dogs</li>
<li id="monkeys"onclick="highlight3()">Monkeys</li>
</ul>
<div class="box33" id="box33_1">
      "Miau, miau," says the cat.
    </div>
<div class="box33" id="box33_2">
      "Wuff, wuff," barks the dog.
    </div>
<div class="box33" id="box33_3">
      "I need some bananas," says the monkey.
    </div>
</div>
</body>
</html>

Sunday, 8 February 2015

Mouse With Moving Eyes With CSS Animation

Thinking about an animal easy to draw I came up with a mouse. A mouse is so easy: you just have to put several round shapes together, put dots in its face and here we have a mouse!

The head, the body, arms and legs, the mouth and eyes all parts are created with div elements. By using the CSS animation property you can move the eyes of the mouse. The left property values of the black dots with the id m_black_right_eye and m_black_left_eye are changed from 0px to 20px with the following syntax:

@keyframes eyemove {
from{left:0px;}
to{left:20px;}
}
The animation should go one forever so the value of the animation property is set to infinite.The black dots should go from left to right and vise versa with the value alternate.

Change the top and left value #mouse in the CSS code and position the mouse at will.

HTML and CSS Code

<html>
<head>
<style>
    #mouse{
    position:relative;
    top:100px;
    left:100px;
    height:100px;
    }
    
    #m_head{
    position:absolute;
    width:100px;
    height:100px;
    border:solid #D68533 2px;
    background-color:#FFB870;
    border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_left_ear{
    position:absolute;
    top:-45px;
    left:-40px;
    width:70px;
    height:70px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_right_ear{
    position:absolute;
    top:-45px;
    left:70px;
    width:70px;
    height:70px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_body{
    position:absolute;
    top:90px;
    left:10px;
    width:70px;
    height:80px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_left_arm{
    position:absolute;
    top:10px;
    left:-15px;
    width:45px;
    height:10px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
     #m_right_arm{
    position:absolute;
    top:10px;
    left:45px;
    width:45px;
    height:10px;
     background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_left_foot{
    position:absolute;
    top:50px;
    left:10px;
    width:10px;
    height:45px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
     #m_right_foot{
    position:absolute;
    top:50px;
    left:50px;
    width:10px;
    height:45px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_white_left_eye{
    position:absolute;
    top:40px;
    left:-10px;
    width:30px;
    height:20px;
    background-color:white;
    border-radius:40%;
    -webkit-border-radius:40%;
    -mox-border-radius:40%;
    border-style:solid;
    border-width:1px;
    border-color:#333399;
    }
    
    #m_white_right_eye{
    position:absolute;
    top:40px;
    left:80px;
    width:30px;
    height:20px;
    background-color:white;
    border-radius:40%;
    -webkit-border-radius:40%;
    -mox-border-radius:40%;
    border-style:solid;
    border-width:1px;
    border-color:#333399;
    }
    
    #m_black_left_eye{
    position:absolute;
    top:5px;
    left:0px;
    width:10px;
    height:10px;
    background-color:black;
    border-radius:50%;
    -webkit-border-radius:50%;
    -mox-border-radius:50%;
    animation: eyemove 3s ease-out alternate infinite;
    -webkit-animation: eyemove 3s ease-out alternate infinite;
    }
    
    @keyframes eyemove {
    from{left:0px;}
    to{left:20px;}
    }
    @-webkit-keyframes eyemove {
    from{left:0px;}
    to{left:20px;}
    }
    
    #m_black_right_eye{
    position:absolute;
    top:5px;
    left:0px;
    width:10px;
    height:10px;
    background-color:black;
    border-radius:50%;
    -webkit-border-radius:50%;
    -mox-border-radius:50%;
    animation: eyemove 3s ease-out alternate infinite;
    -webkit-animation: eyemove 3s ease-out alternate infinite;
    }

#m_nose{
    position:absolute;
    top:60px;
    left:40px;
    width:20px;
    height:10px;
    background-color:#FFD3D3;
    border-bottom-left-radius:50%;
    -webkit-border-bottom-left-radius:50%;
    -moz-border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
    -webkit-border-bottom-right-radius:50%;
    -moz-border-bottom-right-radius:50%;
    }
    
    #m_mouth{
    position:absolute;
    top:75px;
    left:35px;
    width:30px;
    height:3px;
    background-color:red;
    }
    
    #m_teeth{
    position:absolute;
    left:10px;
    width:10px;
    height:10px;
    background-color:white;
    }
  </style>
  
  
  
  </head>
  <body>
  <div id="mouse">
   <div id="m_head">
     <div id="m_white_left_eye">
      <div id="m_black_left_eye">
</div>
</div>
<div id="m_white_right_eye">
        <div id="m_black_right_eye">
</div>
</div>
<div id="m_nose">
</div>
<div id="m_mouth">
<div id="m_teeth">
</div>
</div>
</div>
<div id="m_left_ear">
</div>
<div id="m_right_ear">
</div>
<div id="m_body">
      <div id="m_left_arm">
</div>
<div id="m_right_arm">
</div>
<div id="m_left_foot">
</div>
<div id="m_right_foot">
</div>
</div>
</div>
</body>
</html>

Monday, 2 February 2015

Dissolving Text With CSS Animation

Click on the characters !

When you click on the text above it will dissolve.

This animation is created with JavaScript and the CSS animation property. We change the blur value of the text-shadow property from 0px to 50px creating the effect above. Here is the syntax:

@keyframes your animation{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;}
}

The animation shouldn't start yet therefore this property doesn't contain anything at the beginning. To invoke the animation with the JavaScript onclick event we assign a certain value to it with the following syntax:

function function name(){
document.getElementById("ID of the element").style.WebkitAnimation ="details about the animation";
document.getElementById("ID of the element").style.animation="details about the animation";
}

Pretty easy, huh? Let`s start clicking on the text!

HTML and CSS Code

<html>
<head>
<style>
#title31t
{position:absolute;
left:10px;
font-size:300%;
color:blue;
-webkit-animation:;
animation:;
}

#title31i
{position:absolute;
left:40px;
font-size:300%;
color:blue;
-webkit-animation:;
animation:;
}

#title31t2
{position:absolute;
left:70px;
font-size:300%;
color:blue;
-webkit-animation:;
animation:;
}

#title31l
{position:absolute;
left:100px;
font-size:300%;
color:blue;
-webkit-animation:;
animation:;
}

#title31e
{position:absolute;
left:130px;
font-size:300%;
color:blue;
-webkit-animation:;
animation:;
}

@-webkit-keyframes vanish31a{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@keyframes vanish31a{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@-webkit-keyframes vanish31b{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@keyframes vanish31b{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@-webkit-keyframes vanish31c{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@keyframes vanish31c{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@-webkit-keyframes vanish31d{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@keyframes vanish31d{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@-webkit-keyframes vanish31e{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

@keyframes vanish31e{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;color:white;display:none;}
}

</style>
</head>

<body>
<script>
function vanish1(){
document.getElementById("title31t").style.WebkitAnimation ="vanish31a 3s ease-out 0s 1 normal forwards";
document.getElementById("title31t").style.animation="vanish31a 3s ease-out 0s 1 normal forwards";
}

function vanish2(){
document.getElementById("title31i").style.WebkitAnimation ="vanish31b 2s ease-out 0s 1 normal forwards";
document.getElementById("title31i").style.animation="vanish31b 2s ease-out 0s 1 normal forwards";
}

function vanish3(){
document.getElementById("title31t2").style.WebkitAnimation ="vanish31c 1s ease-out 0s 1 normal forwards";
document.getElementById("title31t2").style.animation="vanish31c 1s ease-out 0s 1 normal forwards";
}

function vanish4(){
document.getElementById("title31l").style.WebkitAnimation ="vanish31d 4s ease-out 0s 1 normal forwards";
document.getElementById("title31l").style.animation="vanish31d 4s ease-out 0s 1 normal forwards";
}

function vanish5(){
document.getElementById("title31e").style.WebkitAnimation ="vanish31e 0.5s ease-out 0s 1 normal forwards";
document.getElementById("title31e").style.animation="vanish31e 0.5s ease-out 0s 1 normal forwards";
}
</script>
<div id="title31t" onclick="vanish1()">T</div>
<div id="title31i"onclick="vanish2()">I</div>
<div id="title31t2" onclick="vanish3()">T</div>
<div id="title31l" onclick="vanish4()">L</div>
<div id="title31e" onclick="vanish5()">E</div>

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>