How to animate arrow?

[mort1m]

I'm currently redesigning my site is at http://mikkelsgaard.no and building it on the Altitude Pro theme. I've added some arrows (dashicons) pointing down from section 1 to 2 and from 3 to 4 and added jump links on them. To make them more visible, I would like to put some animation on them too - making them jump up and down to tempt visitors to click on them to go further down the site.

The problem is that I'm quite new to CSS and html, so I don't know where I could find some code making me do this with the dashicons.

Anyone got some tip on this, or willing to post a simple solution?

Tanks in advance.

http://mikkelsgaard.no

[Davinder Singh Kainth]

Check this -

and

http://www.designermukesh.com/blog/create-infinite-bounce-effect-with-css3-animation/

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[mort1m]

Hi Davinder - thanks for your suggestions and time.

Unfortunately, neither of those work very well. When I put the CSS in style.css and the html in an text widget, the first one does not animate at all - the icon just stands still. The second one animates, but sits in the bottom of the screen and noe where i want it to be.

[Davinder Singh Kainth]

2nd one make it sit at bottom due to position: absolute;

If you want to use position absolute, then add position relative to its main wrapper. Before you try that, you can simple remove following code and check.

position: absolute;
 bottom: 30px;
 left: 50% ;

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[mort1m]

Thanks for your input again, Davinder 🙂 I got the last one working with the dashicon-arrow, removing lots of code (as I did not want to use font awesome either) and ended up with this - that seems to work fine:

.bounce {
 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
}
 
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}

[Davinder Singh Kainth]

Looking cool 🙂

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Author]

Posts