Below is a very simple CSS code to create a scroll down arrow animation to add to your website. Usually this would be on the bottom of your large hero image to signal to the user to scroll down. This would have an anchor link that when pressed automatically scrolls to the next section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<img src="/wp-content/uploads/2019/12/arrow-down-white-300x157.png" class="bounce arrow"> <style> .arrow { text-align: center; margin: 8% 0; } .bounce { -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } </style> |
