| Comments

Bounce Effect With CSS3

How to give effect to arrow like bounce with CSS3 ?

You want to use arrow in your web-page with animation like bounce ball. HOW ?

Firstly, you should use this haml in your code, where you want to use section in your page,

1
2
3
4

%p.scroll-down
   .bounce
     %a{href: '#section2'}
        %i.fa.fa-angle-double-down.fa-5x

In your sass file, you should use

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.scroll-down
    text-align: center
    position: absolute
    z-index: 2
    margin: 0 auto
.bounce
  position: fixed
  left: 50%
  margin-top: -25px
  margin-left: -25px
  height: 50px
  width: 50px
  -webkit-animation: bounce 1s infinite
@-webkit-keyframes bounce
  0%
    bottom: 5px
  25%, 75%
    bottom: 15px
  50%
    bottom: 20px
  100%
    bottom: 0

That’s all!

I hope helped to you.

Comments