DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

SBOMs are essential to circumventing software supply chain attacks, and they provide visibility into various software components.

Related

  • Why Tailwind CSS Can Be Used Instead of Bootstrap CSS
  • The Ultimate Guide to Code Formatting: Prettier vs ESLint vs Biome
  • Subtitles: The Good, the Bad, and the Resource-Heavy
  • Loader Animations Using Anime.js

Trending

  • The Evolution of Software Integration: How MCP Is Reshaping AI Development Beyond Traditional APIs
  • Stop Building Monolithic AI Brains, Build a Specialist Team Instead
  • A Software Engineer’s Guide to Thrive in Gen AI Era: Master It or Fade Out
  • The AWS Playbook for Building Future-Ready Data Systems
  1. DZone
  2. Coding
  3. Languages
  4. CSS Bouncing Arrow

CSS Bouncing Arrow

In this tutorial, we're going to learn how you can create an animated bouncing arrow by using CSS.

By 
Paul Underwood user avatar
Paul Underwood
·
Sep. 29, 16 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
19.6K Views

Join the DZone community and get the full member experience.

Join For Free

In this tutorial, we're going to learn how you can create an animated bouncing arrow by using CSS, like the example above. You'll see this type of animation on sites that use full page slides to showcase parts of the site and use this bouncing arrow effect to show the visitor they can click here to quickly move to the next slide.

First, we add the HTML element to the page, this can be just a div with the classes of arrow and bounce.

<div class="arrow bounce"></div>

Next, we need to add the arrow down image which we can do by using the below base64 image in CSS.

background-image: url(data:image/...

With look of the arrow on the page, we need to make sure the div is centered which we can do by using position: relative; with left: 50%;

.arrow
{
  cursor: pointer;
  position: relative;
  bottom: -2rem;
  left: 50%;
  margin-left:-20px;
  width: 40px;
  height: 40px;

  /**
   * Dark Arrow Down
   */
  background-image: url(data:image/...
  background-size: contain;
}

The animation we want to use in a bounce effect which uses CSS animation the loop of the animation will take 2 seconds to loop and will continue for infinite.

.bounce {
  animation: bounce 2s infinite;
}

The bounce animation works by using the CSS property transform with value translateY, first it starts off at 0 then we move it up to -30px and back to 0.

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

View the demo page to see how you can use this in your projects.

<div class="page-slide blue">
    <div class="container">
        <h1>Slide 1</h1>
        <div class="arrow bounce"></div>
    </div>
</div>

Add Next Slide Click Event

To go to the next slide we need to add a click event to the arrow, from the arrow we need to find the parent slide div. In the example finding the slide div is easy we just need to grab the parent element. From the slide div we need to navigate to the next slide and scroll to this position. Below is the jQuery code you can use to do this functionality.

CSS

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Why Tailwind CSS Can Be Used Instead of Bootstrap CSS
  • The Ultimate Guide to Code Formatting: Prettier vs ESLint vs Biome
  • Subtitles: The Good, the Bad, and the Resource-Heavy
  • Loader Animations Using Anime.js

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: