【动画开发】animation动画最简单写法

时间：2020-03-16 16:05:23 收藏：0 阅读：83

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                border-radius: 50%;
                animation: walk 1s infinite alternate;
            }
            @keyframes walk{
                0%{transform: translate3d(0,0,0) scale(1) rotate(0deg) skew(0deg);}
                100%{transform: translate3d(0,100px,0) scale(1) rotate(90deg) skew(90deg);}
                /*50%{transform: translate3d(200px,100px,0)}*/
                /*75%{transform: translate3d(0,100px,0)}
                100%{transform: translate3d(0,0,0)}*/
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        
    </body>
</html>

3d动画转动效果

技术分享图片

原文：https://www.cnblogs.com/xiaohuizhang/p/12504402.html