CSS Animation rotate on return - html

Question

I am trying to create animation with this arrow that will move up and down and also rotate or change its direction on 0% and 100%. But what I got so far is that arrow will rotate for sec on 100% and then return back to previous direction. So basically what I am trying to do is, arrow should point up on its way up and point down on return or on its way down. Can I do this with just CSS animations?
DEMO
On way up arrow should have this direction and on way down this one
Also I want to animate that rotation on 100% and 0% with rotate if its possible.

Answer 1

Just Change the animation with below code
#keyframes bounceAndRotate {
0% {
transform:rotate(0deg);top:-20px;
}
25% {
transform:rotate(00deg);top:-10px;
}
50% {
transform:rotate(0deg);top:0px;
}
75% {
transform:rotate(180deg);top:10px;
}
100% {
transform: rotate(180deg);top:20px;
}
}
For Demo
CLICK HERE For Demo

Answer 2

Just do away with the alternating direction setting and adjust the keyframe settings such that for the first 50% duration the upward movement and spin is done and then for the next 50% it comes down with the arrow facing downwards. The animation-duration should be doubled because the alternate effect is produced by the keyframes itself.
But doing this would spoil one part of your current animation where the arrow spins to face downward and then spins back to face upwards. Also removing alternate would make the reverse rotation on 100% not happen. But that can be overcome by adding an extra keyframe. This extra keyframe must mirror the initial position of the element (which is no rotation).
.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);
}
50% {
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>
If you want that part also to be maintained before the downward move then add extra keyframes like in the below snippet. Here the sequence of events is as follows:
Arrow goes upwards with arrow head pointing upwards.
When it reaches the topmost point, it rotates 180deg such that the arrow head points downwards.
Once the rotation is complete, it again rotates back to its original position (arrow head pointing up while maintaining the position)
Once this is complete, it again rotates 180deg such that the arrow head points downwards.
Arrow moves downwards with the arrow head pointing downwards.
.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>

Answer 3

You can do like following way:
.arrow {
height: 50px;
position: relative;
width: 10px;
background: black;
margin: 100px;
display: inline-block;
animation: bounceAndRotate 2s infinite linear alternate;
}
.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(10px) rotate(0deg);
}
20% {
transform: translateY(-20px);
}
50% {
transform: translateY(-40px) rotate(180deg);
}
60% {
transform: translateY(-30px) rotate(180deg);
}
80% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0px) rotate(180deg);
}
}
<div class="arrow"> </div>
Hope it helps. Working Fiddle
Edit:
And if you want 360 degree rotation then do like following by removing alternative:
.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(10px) rotate(0deg);
}
20% {
transform: translateY(-20px);
}
50% {
transform: translateY(-40px) rotate(180deg);
}
60% {
transform: translateY(-30px) rotate(180deg);
}
80% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0px) rotate(360deg);
}
}
<div class="arrow"> </div>

Answer 4

Thanks for all anwsers, but this is what i ended up with
DEMO
#keyframes bounceAndRotate {
0% {
transform: translateY(0px) rotate(0deg);
}
35% {
transform: translateY(-195px) rotate(0deg);
}
50% {
transform:translateY(-200px) rotate(180deg);
}
85% {
transform: translateY(-5px) rotate(180deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}