Continuous CSS Rotation Animation on Hover, Animated Back to 0Deg on Hover Out

$(document).ready(function(){
        $(".button").css("animation", "fadeInBottom 1s");

    setTimeout(function(){
        $(".button").css("animation", "fadeInOutShadow ease-in-out 1.2s alternate infinite");
    }, 1200);
    });
            $(".button").hover(function(){
            $(".button").css({"animation": "0", "box-shadow": "0 0 35px rgba(250, 215, 0, 0.9)"});
            }, function(){
                $(".button").css({"box-shadow": "", "animation": "fadeInOutShadow ease-in-out 1.2s alternate infinite"});
                });

.button {

    &:hover {
        box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
    }
}


@keyframes fadeInBottom {
      0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
      }
      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
    }

@keyframes fadeInOutShadow {
  0% {
    -webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button">Button</button>

css3 animation on :hover; force entire animation

I'm afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes.

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

http://jsfiddle.net/u7vXT/

Animation rotate from 360deg to 0deg - iOS sensor

So I am answering my own question after some time to explain how I resolved this issue.

This solution doesn't use React's Animation framework (nor the nativeDriver) but it uses useAnimationFrame callback. So we won't be touching the issue with interpolation method.

Instead I opted for calculating the distance to the desired heading (from a sensor) between rotating left and rotating right by "step" amount. It's called cyclic distance and it's implemented something like this:

function cyclicDistance(current: number, now: number): number {
    const abs = Math.abs(current - now);
    const distanceAround = 360 - abs;
    const distanceStraight = abs;
    const distance = Math.min(distanceAround, distanceStraight);

    return distance;
}

So we are getting the shortest path via Math.min of the two possible solutions.

I am using Reference (useRef Hook) to store current value of heading.
Next we are calculating two distances:

• The first one - base distance - is cyclic distance between current sensor value and our current heading value.

• The second one is used resolving "tendency" like asking "if we increase our heading by 1 (step) would the cyclic distance increase or decrease?"

• const baseDistance = cyclicDistance(
  sensorHeading,
  myHeadingRef
  );

  const tendency =
  cyclicDistance(sensorHeading + 1, myHeadingRef) < baseDistance
  ? 1
  : -1;

The last piece of the puzzle is value wraparound. We are allowing the value of degrees to be higher than 360 or lower than 0. React's CSS rotate transformation can handle that, so we can make use of it.

if (myHeading.current < 0) {
    myHeading.current += 360;
} else if (myHeading.current > 360) {
    myHeading.current -= 360;
}

Putting it all together:

function cyclicDistance(current: number, now: number): number {
    const abs = Math.abs(current - now);
    const distanceAround = 360 - abs;
    const distanceStraight = abs;
    const distance = Math.min(distanceAround, distanceStraight);

    return distance;
}

const [heading, setHeading] = useState(0);
const myHeading = useRef<number>(0);
const locationRef = useRef<Array<number>>([0, 0]);

const step = () => {
    if (myHeading.current < 0) {
        myHeading.current += 360;
    } else if (myHeading.current > 360) {
        myHeading.current -= 360;
    }

    const maxDistance = 10;

    const distance = cyclicDistance(
        myHeading.current,
        locationRef.current[1]
    );

    const tendency =
        cyclicDistance(myHeading.current + 1, locationRef.current[1]) <
        distance
            ? 1
            : -1;

    const move = distance > maxDistance ? maxDistance : distance;

    const newpos = myHeading.current + tendency * move;

    myHeading.current = newpos;
    setHeading(myHeading.current);
};

useAnimationFrame(() => step(), []);

It might need a little bit of refactoring to increase readability, but its good enough for you the get the idea.

---

Related Topics