All geek questions in one place

Pause CSS animation using javascript, as well as move to a specific location in the animation

I have an infinite slider completely created using CSS animation, and I want to be able to manipulate the animation using javascript (onlcick input and keyboard). I want to be able to quickly run animation from a single frame, i.e. Accelerate it ... to another to give the effect of a jump when you click a button that refers to a specific image in the slider. In addition, I want to be able to go through the animation using keyboard input ... (->, <-)

Does anyone know how to achieve this?

on click ..

  • restore the current position of the key frame;
  • establish the appropriate direction to the destination;
  • significantly increase the speed of animation to achieve the desired key frame;
  • either pause the animation or continue from a new point

keyboard input ...

  • go to specific keyframes and continue animation
+4
source share
2 answers

Try

HTML

<!-- html -->
<div id=animated></div>

css

      /* css */

    #animated {

      animation : animationName; /* animation block(s) */

      animation-play-state : paused; /* (paused; running) */ 

    }

    @keyframes animationName {

      0% { .. /* css animations (`animationstart`) */ }

      50% {..}

      100% { .. /* css animations (`animationend` / `animationiteration` (start; end)) */ }

    }

Js

 (function(el) {

   function animations(e) {

     /* `key code` to trigger event */
     if (e.which === 123456) {

       $(el).animate({ /* jquery animations */ }, 123456 /* duration */)
       .promise().done(function() {
         el.style.animationPlayState = "running";
         el.style.WebkitAnimationPlayState = "running";
        });

      };

    };

$(window).on("keydown", animations);
})($(#animated).get(0))

$(document).ready(function() {

    (function reanimate(el, r, p, runner, pauser, pauseAll) {

        var _state = function() {
            $.when(
            $("#animated").data("states", {"fxq": "animated!","cssAnimationState": (el.style.WebkitAnimationPlayState || el.style.animationPlayState),"jsAnimationState": $("#animated").queue("fx")[0]}))
            .done(function(status) {
                return status.data("states")
            });

            return String("css animation state: " + (el.style.WebkitAnimationPlayState || el.style.animationPlayState) + "&nbsp; js animation state: " + $("#animated").queue("fx")[0])
        };

        var runner = function() {
            el.style.animationPlayState = "running";
            el.style.WebkitAnimationPlayState = "running";
            return $("data").html(_state())
        };

        var pauser = function() {
            el.style.animationPlayState = "paused";
            el.style.WebkitAnimationPlayState = "paused";
            $("#animated:animated, #animated *").finish().queue("fx", []);
            return $("data").html(_state())

        };

        $("button:last").on("click", pauser);
        $("button:first").on("click", runner);

        function player(e, pause, play, pauseAll) {

            /*!
            //  settings
            */
            var pauseAll = (undefined || 38); /* `up-arrow` : `pauseAll` */
            var pause = (undefined || 37); /* `left-arrow` : `paused` */
            var play = (undefined || 39); /* `right-arrow` : `running` */

            if (e.which === play) {
                e.preventDefault();
                runner();
                $("data").html(_state())
            };
            /*!
            //  js (jquery) animations (, css transitions,
            //  css animations) at `paused` css animations
            */
            if (e.which === pause) {
                e.preventDefault();
                $.when(
                $('#animated')
                .animate({
                    width: "+=400px",
                    height: "+=400px",
                    borderRadius: "+=50%",
                    fontSize: "+=22px"
                },
                {
                    duration: 3500,
                    easing: "swing",
                    start: $('#animated').css({"transition": "background 3500ms linear, box-shadow 3500ms linear","-webkit-transition": "background 3500ms linear, -webkit-box-shadow 3500ms linear","-moz-transition": "background 3500ms linear, -moz-box-shadow 3500ms linear","background": "yellow","box-shadow": "0.25em 0.25em 0.25em #f57900","-webkit-transform-style": "preserve-3d","-webkit-transform": "rotateX(180deg) rotateZ(45deg)","-moz-transform-style": "preserve-3d","-transform": "rotateX(180deg) rotateZ(45deg)","-webkit-backface-visibility": "visible","-moz-backface-visibility": "visible"}).html(function() {
                        return $("<em>" + $('#animated').data("states").fxq + "</em>").css({"display": "block","position": "relative","top": "25%","left": "0%","transform": "rototeX(33deg)","text-shadow": "2px 2px 2px orange"}).fadeIn(2000, function() {
                            _state()
                        })
                    })
                })
                .animate({width: "100px",height: "100px",
                    borderTopLeftRadius: "0%",
                    borderTopRightRadius: "0%",
                    borderBottomLeftRadius: "0%",
                    borderBottomRightRadius: "0%",
                    fontSize: "10px"}, {
                    duration: 3500,
                    easing: "linear",
                    done: function() {
                        $('#animated').css({"transition": "background 3500ms ease-out, box-shadow 2500ms ease-out","-webkit-transition": "background 3500ms, -webkit-box-shadow 3500ms ease-out","-moz-transition": "background 3500ms ease-out, -moz-box-shadow 3500ms ease-out","background": "red","box-shadow": "0.0em 0.0em 0.0em transparent","-webkit-transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)","transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)","-moz-backface-visibility": "hidden","-webkit-backface-visibility": "hidden"}).children("em").fadeOut(2000, function() {
                            _state()
                        }).promise().done(function() {
                            $("em").finish().detach()
                        })
                    }
                }), $("data").html(_state())).promise().done(function() {
                    runner();
                }).always(function() {_state()})
            };
            /*!
            //  pause all css and js animations
            */
            if (e.which === pauseAll) {
                e.preventDefault();
                (function() {
                    var _check = ($("#animated").queue("fx")[0] != undefined ? $("#animated:animated, #animated *").finish() && pauser() : ((el.style.animationPlayState === undefined ? el.style.WebkitAnimationPlayState : el.style.animationPlayState) === "running" ? pauser() : runner()))

                    return $.when(_check, $("data").html(_state()))

                }())
            };
        };
        $(window).on("keydown", player);

        return $("data").html(_state())
    })($("#animated").get(0), "running", "paused")
})

See http://guest271314.imtqy.com/reanimate/

There may be several possible ways to fulfill this requirement, including CSSOM, Javascript, the jQuery library. See links.

Starting and pausing css animations can be done with animation-play-state.

jquery . $(element).queue("fx", []) jquery jQuery animations queue. .finish() , finish inprogress jQuery .

animation-play-state : paused jquery.

, , (t212) style; animationstart animationiteration DOM; , .

reanimate.js , . css- jquery, , , css ( "@keyframes" ) / ; .

- . , webkit, firefox opera "" . webkit "" " ", "" css, firefox. .

Opera, , -o- -webkit- css, w3c ( ) . , "" "animationstart" ..

reanimate.js ( 1.0) css keyframe '(elapsedTime) / running css layered "" css/js / css-. , css , , "" js . , elapsedTime timeStamp ( 0 miiliseond, ) keyframes. , "" "" "" , "requestAnimationFrame".

webkit

Webkit Javascript Variable   http://jsfiddle.net/russelluresti/RHhBz/2/

, css3

css Javascript

https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitAnimationEventClassReference/WebKitAnimationEvent/WebKitAnimationEvent.html

http://msdn.microsoft.com/en-us/library/ie/hh772074%28v=vs.85%29.aspx

http://blogs.msdn.com/b/msdn_answers/archive/2013/11/04/part-i-using-javascript-to-set-keyframes-in-css-animations-windows-store-apps-ie.aspx

http://www.w3.org/TR/animation-timing/

,

+3

Source: https://habr.com/ru/post/1529298/

More articles:


All Articles