html前端关于动画的效果

使一个宽高均为100px的 div ,在页面加载2秒钟后,从其当前位置从左到右移动300px,匀速移动,顺时针旋转180度,5秒钟完成重复3次.请写出其动画规则定义以及其 css 定义”


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                animation: 1.5s;
                animation-delay: 2s;
                animation-iteration-count: 3;
                animation-name: myfirst;
                background: red;
                width: 100px;
                height: 100px;
                position: relative;
            }
            
            @keyframes myfirst {
                0% {
                    left: 0;
                    transform: rotate(0);
                }
                
                100% {
                    left: 300px;
                    transform: rotate(180deg);
                }
            }
        </style>
    </head>
    <body>
        <div class='box'> 
        </div>
    </body>
</html>
<script>
    
</script>

建议你看一下过渡动画和animation

CSS3 动画 | 菜鸟教程 [mystyle] #animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -w..

https://www.runoob.com/css3/css3-animations.html

我怀疑咱俩一个班的因为作业一样哈哈哈