TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
How To Create Bounce Effect With CSS3 Animation
Deeppak Chaoudhary
Mar 08
2016
Code
1.2
k
0
1
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
expand
Bounce_Dc.zip
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.
<!DOCTYPE html
>
<
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: 300px;
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
=
"visibility: visible; animation-name: bounceInUp;"
>
<
div
class
=
"shadow"
>
<
h1
>
Deepak Chaudhary
</
h1
>
<
img
src
=
"http://www.c-sharpcorner.com/App_themes/csharp/images/sitelogo.png"
/>
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>
Bounce Effect
CSS