Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- part of html
- <div class="arrow content-header-arrow1">
- <img src="icons/arrow-down.svg" alt="scroll">
- </div>
- <div class="arrow content-header-arrow2">
- <img src="icons/arrow-down.svg" alt="scroll">
- </div>
- css
- .arrow {
- position: absolute;
- width: 100%;
- height: 100vh;
- z-index: 1;
- text-align: center;
- }
- .arrow img{
- opacity: 0;
- position: absolute;
- bottom: 5vh;
- }
- .content-header-arrow1 img {
- animation: arrow-movement 1.5s ease-in-out infinite; /* speed */
- }
- .content-header-arrow2 img{
- animation: arrow-movement 1.5s 0.75s ease-in-out infinite; /* speed - delay */
- }
- /* Animation */
- @keyframes arrow-movement {
- 0% {
- opacity: 0;
- bottom: 7vh;
- }
- 70% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement