Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to
replace:
JS:
$("#target_element").mouseenter( function() {
$("#arr_left")
.transition( { x: 3 }, 300, 'easeOutSine' )
.transition( { x: 0 }, 300, 'easeInSine' );
};
}
with:
JS:
$("#target_element").mouseenter( function() {
$("#arr_left").addClass('hint');
}
CSS:
#arr_left.hint {
-webkit-animation: hint_left 600ms;
-moz-animation: hint_left 600ms;
-o-animation: hint_left 600ms;
animation: hint_left 600ms;
}
@keyframes hint_left {
0%, 100% {
-webkit-transform: translate(0);
-moz-transform: translate(0);
-o-transform: translate(0);
transform: translate(0);
-webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine */
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
50% {
-webkit-transform: translate(3px);
-moz-transform: translate(3px);
-o-transform: translate(3px);
transform: translate(3px);
-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); /* easeInSine */
animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715) ;
}
}
Unfortunately, this new code is not functioning properly.
1) What am I doing incorrectly here?
2) What is the most concise code (compatible with all browsers) to achieve this effect?
Additionally, I want to keep the "hint" class generic so that it can be targeted via JavaScript, with each arrow having its own specific translation property. Thank you in advance!
EDIT:
http://jsfiddle.net/bg7w6jmh/61/
I have included a fiddle. Note: I require the additional container for the arrow because it is animated (rotated) in other instances. The objective is to smoothly move the small arrow to the left by 3px and back to indicate the target_element being animated on click or swipe. Refer to the keyframes for values and easing. Your assistance is greatly appreciated!