使用CSS3实现WP8跳动的数字 [IE10] 其他浏览器自行修改CSS3前缀

代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .tile2 span {
             animation-name: donghua2;
                animation-duration: 0.2s;
                animation-iteration-count: 1;
                animation-timing-function: linear;

        }

        @keyframes donghua2 {
             0% {
                transform: rotateX(0deg) skewX(0deg);
            }

            25% {
                transform: rotateX(90deg) skewX(10deg);
            }

            26% {
                transform: rotateX(90deg) skewX(-10deg);
            }

            50% {
                transform: rotateX(0deg) skewX(0deg);
            }

            75% {
                transform: rotateX(-30deg) skewX(4deg);
            }

            100% {
                transform: rotateX(0deg) skewX(0deg);
            }
        }

    </style>
    <script src="JQuery 1.7.2/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $("#tile span").text(parseInt($("#tile span").text()) + 1);
                $("#tile").addClass("tile2");
                setTimeout(function () {
                    $("#tile").removeClass("tile2");
                }, 300);
            });
            

        });
    </script>
</head>
<body>
    <div id="tile"  style="background-color:#007acc;80px;height:80px;font-size:40px;text-align:center;color:white;line-height:80px;">
        <span>0</span>
    </div>
    <input id="btn1" type="button" value="+1" />
</body>
</html>

使用CSS3实现WP8跳动的数字 [IE10] 其他浏览器 自行修改CSS3前缀

使用CSS3实现WP8跳动的数字 [IE10] 其他浏览器自行修改CSS3前缀