To simplify the animation, consider eliminating the alternating direction setting and adjusting the keyframe settings accordingly. For the first 50% duration, focus on the upward movement and spin, then transition to a downward movement with the arrow pointing downwards for the next 50%. To achieve this without altering the entire animation, double the animation-duration, as the alternate effect is embedded within the keyframes themselves.
However, keep in mind that this adjustment may impact a part of your current animation where the arrow spins both upwards and downwards. By removing the alternate property, you eliminate the reverse rotation at 100%. To address this, add an extra keyframe mirroring the initial position of the element (no rotation).
If you wish to maintain the spinning sequence before the downward movement, include additional keyframes as shown below:
- The arrow ascends with the head facing up.
- At the peak, it rotates 180 degrees to point downwards.
- After completing the rotation, it returns to the original position while still pointing upwards.
- It then rotates 180 degrees again, pointing downwards as it descends.
- Finally, the arrow moves down with the head facing downward.
---
.arrow {
height: 50px;
position: relative;
width: 10px;
background: black;
margin: 100px;
display: inline-block;
animation: bounceAndRotate 2s infinite linear;
}
.arrow:before {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(50deg);
left: -10px;
}
.arrow:after {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(-50deg);
right: -10px;
}
@keyframes bounceAndRotate {
0% {
transform: translateY(0) rotate(0deg);
}
12.5% {
transform: translateY(-10px);
}
25% {
transform: translateY(-20px);
}
37.5% {
transform: translateY(-30px);
}
45% {
transform: translateY(-40px) rotate(180deg);
}
55%, 60%{
transform: translateY(-40px);
}
67.5%{
transform: translateY(-40px) rotate(180deg);
}
90% {
transform: translateY(0px) rotate(180deg);
}
100% {
transform: translateY(0px);
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="arrow"></div>