Callback processing of CSS3 animation_html/css_WEB-ITnose-HTML Tutorial-php.cn

Callback processing of CSS3 animation_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:39

Original

882 people have browsed it

When we do js animation, we often need to do callback processing, such as triggering an event after an animation is completed, executing another animation after an animation is completed, etc., but when using Can the state of movement be captured for callback processing during CSS3 animation?

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, which is triggered 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('.rect');            _rect.onclick = function () {                _rect.style.webkitTransform = 'translateX(300px)';            }            _rect.addEventListener('webkitTransitionEnd', function () {                alert('动画执行完毕！');                // callback here            }, false);        }    </script></head><body>    <div class="rect"></div></body></html>

Copy after login

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('.rect');            _rect.onclick = function () {                _rect.style.webkitAnimation = 'move 3s';            }            _rect.addEventListener('webkitAnimationEnd', function () {                alert('动画执行完毕！');                // callback here            }, false);        }    </script></head><body>    <div class="rect"></div></body></html>

Copy after login

The above is some content about CSS3 animation callback processing. It has been used recently when making H5 pages. To summarize.