[CSS] Navegador no soportado

Sé que muchos tenemos sitios webs con efectos realizados con CSS3 y HTML5 los cuales no pueden llegar a funcionar con Internet Explorer, ademas de que hay sitios que se deforman al ingresar con este navegador.

Por dicha cuestión les traigo ese lindo diseño de advertencia para avisar al usuario de que no funciona su sitio con IE.

Yo solo les traigo el HTML y CSS, lo que les quedaría a ustedes es adaptarlo a su sitio

HTML:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
 <title>Z-Post.NET - No IE</title>
 <meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<link rel="Shortcut icon" href="images/ico.png">
 <link rel="stylesheet" type="text/css" href="css/styleie.css" >
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,7​00,800,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/font-awesome.css">
</head>
<body>

<div class="header">

<p>Perdón, pero Z-Post.net no funciona con Internet Explorer.</p>

        </div>
    
<div id="Wrapper">
    
    <div id="icon"> <img src="http://oi57.tinypic.com/mo4th.jpg"> </div> <div id="iconShadow"></div> 
</div>




</body>
</html>


CSS:

Código:

body{
overflow: hidden;
    background-color:#00BD3C;
}
.header{
width:100%;
height:auto;
position:absolute;
top:0px;
left:0px;
background-color: #262b37;
}
.header p{
    color: #c3c8d6;
    font-family:Open#Sans, sans-serif;
    font-size:16px;
    line-height:21px;
    font-weight:400;
    padding:10px;
    margin:0px;
}
#Wrapper{
    width:500px;
    height:500px;
    position: absolute;
    top:50px;
    left:50%;
    margin-left:-250px;
}

#icon {
width:150px;
height:150px;
position: absolute;
    left:50%;
    margin-left:-163px;
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Chrome, Safari, Opera */
transform: scale(0.5,0.5);
    top:0;    
    z-index: 11;
    -webkit-animation: jump 1s infinite;
    -moz-animation: jump 1s infinite;
    -o-animation: jump 1s infinite;
    -ms-animation: jump 1s infinite;
    animation: jump 1s infinite;
}





@keyframes jump {
    0% {
        top: 0px;
    }
    50% {
        top: 140px;
        height: 140px;
    }
    55% {
        top: 160px; 
        height: 120px; 
    }
    65% {
        top: 120px; 
        height: 140px; 
        border-radius: 70px;
    }
    95% {
        top: 0px;
    }
    100% {
        top: 0px;
    }
}
#iconShadow {
    position: absolute;
    left: 50%;
    bottom: 80px;
    z-index: 10;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
    border-radius: 30px / 40px;    
    -webkit-transform: scaleY(.3);
    -moz-transform: scaleY(.3);
    -ms-transform: scaleY(.3);
    -o-transform: scaleY(.3);
    transform: scaleY(.3);
    -webkit-animation: shrink 1s infinite;
    -moz-animation: shrink 1s infinite;
    -o-animation: shrink 1s infinite;
    -ms-animation: shrink 1s infinite;
    animation: shrink 1s infinite;
}
@-webkit-keyframes jump {
    0% {top: 0px;
        -webkit-animation-timing-function: ease-in;
    }
    40% {}
    50% {top: 140px;
        height: 140px;
        -webkit-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 120px; border-radius: 70px / 60px;
        -webkit-animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px; border-radius: 70px;
        -webkit-animation-timing-function: ease-out;}
    95% {
        top: 0px;        
        -webkit-animation-timing-function: ease-in;
    }
    100% {top: 0px;
        -webkit-animation-timing-function: ease-in;
    }
}
@-moz-keyframes jump {
    0% {top: 10px;
        -moz-animation-timing-function: ease-in;
    }
    40% {}
    50% {top: 140px;
        height: 140px;
        -moz-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 120px; border-radius: 70px / 60px;
        -moz-animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px; border-radius: 70px;
        -moz-animation-timing-function: ease-out;}
    95% {
        top: 10px;        
        -moz-animation-timing-function: ease-in;
    }
    100% {top: 10px;
        -moz-animation-timing-function: ease-in;
    }
}
@-o-keyframes jump {
    0% {top: 10px;
        -o-animation-timing-function: ease-in;
    }
    40% {}
    50% {top: 140px;
        height: 140px;
        -o-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 120px; border-radius: 70px / 60px;
        -o-animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px; border-radius: 70px;
        -o-animation-timing-function: ease-out;}
    95% {
        top: 10px;        
        -o-animation-timing-function: ease-in;
    }
    100% {top: 10px;
        -o-animation-timing-function: ease-in;
    }
}
@-ms-keyframes jump {
    0% {top: 10px;
        -ms-animation-timing-function: ease-in;
    }
    40% {}
    50% {top: 140px;
        height: 140px;
        -ms-animation-timing-function: ease-out;
    }
    55% {top: 160px; height: 120px; border-radius: 70px / 60px;
        -ms-animation-timing-function: ease-in;}
    65% {top: 120px; height: 140px; border-radius: 70px;
        -ms-animation-timing-function: ease-out;}
    95% {
        top: 10px;        
        -ms-animation-timing-function: ease-in;
    }
    100% {top: 10px;
        -ms-animation-timing-function: ease-in;
    }
}
@keyframes jump {
    0% {
        top: 10px;
        animation-timing-function: ease-in;
    }
    50% {
        top: 140px;
        height: 140px;
        animation-timing-function: ease-out;
    }
    55% {
        top: 160px; 
        height: 120px; 
        border-radius: 70px / 60px;
        animation-timing-function: ease-in;
    }
    65% {
        top: 120px; 
        height: 140px; 
        border-radius: 70px;
        animation-timing-function: ease-out;
    }
    95% {
        top: 10px;        
        animation-timing-function: ease-in;
    }
    100% {
        top: 10px;
        animation-timing-function: ease-in;
    }
}
@-webkit-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -webkit-animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -webkit-animation-timing-function: ease-in;
    }
}
@-moz-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -moz-animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        -moz-animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -moz-animation-timing-function: ease-in;
    }
}
@-o-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -o-animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        -o-animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -o-animation-timing-function: ease-in;
    }
}
@-ms-keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -ms-animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        -ms-animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        -ms-animation-timing-function: ease-in;
    }
}
@keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        animation-timing-function: ease-in;
    }
    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, .3);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
        border-radius: 20px / 20px;
        animation-timing-function: ease-out;
    }
    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, .1);
        box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
        border-radius: 30px / 40px;
        animation-timing-function: ease-in;
    }
}



.header {

    font-size: .8em;

    text-align: center;

    padding: 10px;

    background-color: #262b37;

    color: #fff;

    box-shadow:    0px 1px 3px 0px rgba(0, 0, 0, .3);

    text-transform: uppercase;

    position: absolut;

    font-weight: bold;

    
    -webkit-animation: bounce 800ms ease-out;

    -moz-animation: bounce 800ms ease-out;

    -o-animation: bounce 800ms ease-out;

    animation: bounce 800ms ease-out;

}


/* Webkit, Chrome and Safari */


@-webkit-keyframes bounce {

  0% {
    -webkit-transform:translateY(-100%);
    opacity: 0;
  }
  
5% {
      -webkit-transform:translateY(-100%);
    opacity: 0;
  }
  
15% {
      -webkit-transform:translateY(0);
    padding-bottom: 5px;
  }
  
30% {
      -webkit-transform:translateY(-50%);
  }
  
40% {
      -webkit-transform:translateY(0%);
    padding-bottom: 6px;
  }
  
50% {
      -webkit-transform:translateY(-30%);
  }
  
70% {
      -webkit-transform:translateY(0%);
    padding-bottom: 7px;
  }
  
80% {
      -webkit-transform:translateY(-15%);
  }
  
90% {
      -webkit-transform:translateY(0%);
      padding-bottom: 8px;
  }
  
95% {
      -webkit-transform:translateY(-10%);
  }
  
97% {
      -webkit-transform:translateY(0%);
      padding-bottom: 9px;
  }
  
99% {
      -webkit-transform:translateY(-5%);
  }
  
100% {
      -webkit-transform:translateY(0);
      
padding-bottom: 9px;
    
opacity: 1;
  }
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
  0% {
    -moz-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      -moz-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      -moz-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      -moz-transform:translateY(-50%);
  }
  40% {
      -moz-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      -moz-transform:translateY(-30%);
  }
  70% {
      -moz-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      -moz-transform:translateY(-15%);
  }
  90% {
      -moz-transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      -moz-transform:translateY(-10%);
  }
  97% {
      -moz-transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      -moz-transform:translateY(-5%);
  }
  100% {
      -moz-transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}

/* Opera 12.0 */
@-o-keyframes bounce {
  0% {
    -o-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      -o-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      -o-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      -o-transform:translateY(-50%);
  }
  40% {
      -o-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      -o-transform:translateY(-30%);
  }
  70% {
      -o-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      -o-transform:translateY(-15%);
  }
  90% {
      -o-transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      -o-transform:translateY(-10%);
  }
  97% {
      -o-transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      -o-transform:translateY(-5%);
  }
  100% {
      -o-transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
  0% {
    transform:translateY(-100%);
    opacity: 0;
  }
  5% {
      transform:translateY(-100%);
    opacity: 0;
  }
  15% {
      transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
      transform:translateY(-50%);
  }
  40% {
      transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
      transform:translateY(-30%);
  }
  70% {
      transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
      transform:translateY(-15%);
  }
  90% {
      transform:translateY(0%);
      padding-bottom: 8px;
  }
  95% {
      transform:translateY(-7%);
  }
  97% {
      transform:translateY(0%);
      padding-bottom: 9px;
  }
  99% {
      transform:translateY(-3%);
  }
  100% {
      transform:translateY(0);
      padding-bottom: 9px;
    opacity: 1;
  }
}


Espero que les haya gustado, les dejo una demo: http://cssdeck.com/labs/bounce_ie_icon