Home >Web Front-end >CSS Tutorial >A brief discussion on the callback processing method of CSS3 animation

A brief discussion on the callback processing method of CSS3 animation

高洛峰Original: 2017-03-07 11:59:371264browse

When we do js animation, we often need to do callback processing, such as triggering an event after one animation is completed, executing another animation after one animation is completed, etc., but can it be captured when using CSS3 animation? What about callback processing for motion status?

CSS3 animation can also be processed with callbacks. It is divided into two attributes, one is transition [w3c document] and the other is animation [w3c document].

1. Transition

For transition, you can listen to the transitionend event and trigger it when the animation is completed. You can use it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3-transitionend - BeyondWeb</title>
    <style>
        * {margin: 0; padding: 0;}   
        .rect {   
            width: 100px;   
            height: 100px;   
            background-color: #f80;   
            -webkit-transition: all .5s;   
        }   
    </style>
    <script>
        window.onload = function () {   
            var _rect = document.querySelector(&#39;.rect&#39;);   
            _rect.onclick = function () {   
                _rect.style.webkitTransform = &#39;translateX(300px)&#39;;   
            }   

            _rect.addEventListener(&#39;webkitTransitionEnd&#39;, function () {   
                alert(&#39;动画执行完毕！&#39;);   
                // callback here   
            }, false);   
        }   
    </script>
</head>
<body>
    <p class="rect"></p>
</body>
</html>

2. animation

For animation we can listen to the animationend event, the sample code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3-animationend - BeyondWeb</title>
    <style>
        * {margin: 0; padding: 0;}   
        .rect {   
            position: relative;   
            width: 100px;   
            height: 100px;   
            background-color: #f80;   
        }   

        @-webkit-keyframes move {   
            from {   
                -webkit-transform: rotate(0);   
            }   
            to {   
                -webkit-transform: rotate(360deg);   
            }   
        }   
    </style>
    <script>
        window.onload = function () {   
            var _rect = document.querySelector(&#39;.rect&#39;);   
            _rect.onclick = function () {   
                _rect.style.webkitAnimation = &#39;move 3s&#39;;   
            }   

            _rect.addEventListener(&#39;webkitAnimationEnd&#39;, function () {   
                alert(&#39;动画执行完毕！&#39;);   
                // callback here   
            }, false);   
        }   
    </script>
</head>
<body>
    <p class="rect"></p>
</body>
</html>

is about some content about CSS3 animation callback processing. It was recently used when making H5 pages. Let’s summarize.

The above article briefly discussing the callback processing of CSS3 animation is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more articles related to the callback processing method of CSS3 animation, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary analysis of css3 animation effectsNext article：Summary analysis of css3 animation effects

See more

A brief discussion on the callback processing method of CSS3 animation

Related articles