CSS

[Copy and Paste Ready] How to Create a Repeating Arrow Animation with CSS Only

 

In the world of web development, animations are often used as a way to grab users’ attention. However, in many cases, creating complex animations requires leveraging programming languages such as JavaScript. But what if there were a simpler, performance-oriented method? This time, we will show you how to create an engaging repeating arrow animation using only CSS. This is especially effective for drawing attention to text.

Contents
  1. Define the Arrow and Its Movement with CSS
  2. Place the Arrow with HTML
  3. Demo Page for Repeating Arrow CSS Animation
  4. Conclusion

Define the Arrow and Its Movement with CSS

To achieve this animation, we use the animation property and @keyframes rule in CSS. This allows us to create a moving arrow. The CSS code below shows the basic structure. Feel free to customize it as needed.

<style>
body {
  font-family: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", Osaka, "ＭＳ Ｐゴシック", Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  font-size: 16px;
}
h1 {
  font-size: 18px;
  line-height: 1.6em;
  text-align: center;
  font-weight: normal;
  padding: 10px 0;
}
.arrow {
  position: relative;
  width: 100px;
  margin: 0 auto;
}
.arrow::before {
  animation: arrow 2.5s infinite;
  border: solid #FF0000;
  border-width: 0 0 2px 2px;
  content: "";
  margin: auto;
  position: absolute;
  top: -64px;
  left: 25px;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
.att {
  font-size: 16px;
  font-weight: bold;
  color: #FF0000;
}
@keyframes arrow {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  60% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 60%, 100% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}
</style>

Place the Arrow with HTML

To implement the arrow animation on a web page, use the following HTML markup. This shows an element with the .arrow class defined in CSS. Place the text “Look Here” within this element to draw users’ attention.

<div class="arrow">
  <span class="att">Look Here</span>
</div>

Demo Page for Repeating Arrow CSS Animation

To see this animation in action, please check out the demo page below. Through this demo, you can experience the possibilities of creating animations using only CSS.

Demo of Repeating Arrow CSS Animation

Conclusion

We introduced a way to create engaging animations using only CSS, without relying on JavaScript. This technique can improve the user interface of your website or application, making it more attractive and efficient. Especially when you have text or elements that you want users to focus on, this arrow animation can be highly effective. Give this method a try and bring innovation to your web development projects!

Note: Use this method at your own discretion. Please do not reuse the Google Analytics tag in the head tag of the demo page.

Animation
RELATED POST