In this article we learn how to create a bounce effect with CSS3. The basic idea behind how the bounce will start is that when the object drops on the surface the first time, it bounces of the surface and will reach its highest level. Then it gradually reaches a lower point with every bounce, until the object stops bouncing.
you can use this code in your project copy this code and paste it.
Your Code is as under
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bounce Demo By DC</title>
<style type="text/css">
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
.shadow {
padding: 15px 15px 15px 40px;
top: 100%;
width: 400px;
margin-top: 20px;
background: #ffffff;
border: 1px solid #cbcbcb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="bounceInUp animated" style="animation-name: bounceInUp; visibility: visible;">
<div class="shadow">
<h1>
Deepak Chaudhary</h1>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7s8u_-x9YxvDCbFYDmafrKWLtODwK86C3LncDREP6q4RH2214oazFpH33V602ftM74TnWABF5fT-VLMo6jxNmUjSrTuuN4K5I2gHjzVRvDSX9lS2ipayUe5nKm_y9_uASW6HU_TqIi8B/s1600-r/finalc%2523logoPNGupdated.png" />
</div>
</div>
</form>
</body>
</html>
<head runat="server">
<title>Bounce Demo By DC</title>
<style type="text/css">
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
.shadow {
padding: 15px 15px 15px 40px;
top: 100%;
width: 400px;
margin-top: 20px;
background: #ffffff;
border: 1px solid #cbcbcb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="bounceInUp animated" style="animation-name: bounceInUp; visibility: visible;">
<div class="shadow">
<h1>
Deepak Chaudhary</h1>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7s8u_-x9YxvDCbFYDmafrKWLtODwK86C3LncDREP6q4RH2214oazFpH33V602ftM74TnWABF5fT-VLMo6jxNmUjSrTuuN4K5I2gHjzVRvDSX9lS2ipayUe5nKm_y9_uASW6HU_TqIi8B/s1600-r/finalc%2523logoPNGupdated.png" />
</div>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment