JS animation spin on hover

Question

This is my first question on stackoverflow.

Wondering if anyone can point me to a solution/resource on animating buttons using JS/JQuery.

Particularly, the animation I can't figure out is spinning a circular button 180 degrees on hover.

Thanks :)

[_Create a Minimal, Complete, and Verifiable example_](http://stackoverflow.com/help/mcve) which could demonstrate what you have tried.. — Rayon, Jun 24 '16 at 17:03
If what you want is to animate a button on hover, you might want to look into CSS animations. The less javascript you depend on, the better. If you still want to go with javascript, this might help https://developer.mozilla.org/en-US/docs/Web/API/Element/animate — fjsuarez, Jun 24 '16 at 17:06
i think your answer is here http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate — , Jun 24 '16 at 17:19
There is a tutorial on [Codeschool](https://www.codeschool.com/courses/adventures-in-web-animations) about animating transitions and transforms, it is pretty straight forward and full of examples. — cavpollo, Jun 24 '16 at 17:19

score 1 · Answer 1 · answered Jun 24 '16 at 17:09

1

You can use css keyframes

div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    -webkit-animation: mymove 1s infinite; /* Chrome, Safari, Opera */
    animation: mymove 1s infinite;
}


/* Standard syntax */
@keyframes mymove {
       from   {    transform: rotateY(0deg);}
to { transform: rotateY(360deg);

}

answered Jun 24 '16 at 17:09

Piyush.kapoor

6,715
1
21
21

Thanks! Is there a way to have it spin 180 degrees on hover and then when pointer is moved off of element, have it spin back? Right now it spins back and forth on hover. – protoEvangelion Jun 28 '16 at 15:52

score 1 · Answer 2 · answered Jun 24 '16 at 17:17

you can animate buttons using CSS. At http://www.w3schools.com/css/css3_animations.asp you can learn about CSS animations. You may also want to learn about CSS transitions at http://www.w3schools.com/css/css3_transitions.asp. If you what to create an animation using JS what you would do is set a CSS transition on the HTML element that you want to animate and then use JS to set CSS properties like background-color and transform. You can access the CSS of an element using element.style.property. replace property with the property you want to change or add.

Thanks for taking the time to point me in the right direction! — protoEvangelion, Jun 28 '16 at 16:01

score 1 · Accepted Answer · answered Jun 28 '16 at 16:39

The most intuitive answer I found was this:

  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

    /*CSS entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

Further explanation can be found here: https://davidwalsh.name/css-flip

JS animation spin on hover

3 Answers3