CSS鸭子表练习的animation的简写属性没有效果,如何解决?

制作钟表时候,使用了animation的属性,在使用简写属性的时候,指针均不移动,只有分开写animation-name,animation-duration这些属性的时候才运行,如CSS里的.min_wrapper所示
问题相关代码

CSS

<style>
        * {
            padding: 0;
            margin: 0;
        }

        /* 设置表的样式 */
        .clock{
            width: 500px;
            height: 500px;
            /* background-color: #bfa; */
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 50%;
            border: 10px solid black;
            position: relative;
            background-image: url(./img/鸭子表.jpg);
            background-size: cover;
        }

        .clock > div{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        /* 设置时针容器 */
        .hour_wrapper{
            height: 70%;
            width: 70%;
            /* background-color: #bfa; */
            /* animation: running 43200s linear infinite; */
            animation-name: running;
            animation-duration: 43200s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        /* 设置时针 */
        .hour{
            height: 50%;
            width: 6px;
            background-color: #000;
            margin: 0 auto;
        }

        /* 设置分针容器 */
        .min_wrapper{
            height: 80%;
            width: 80%;
            /* background-color: #bfa; */
            /* animation: running 3600s steps(60) infinite; */
            /* animation: running 3600s steps(60) none infinite normal none; */
            animation-name: running;
            animation-duration: 3600s;
            animation-timing-function: steps(60);
            animation-iteration-count: infinite;
        }
        /* 设置分针 */
        .min{
            height: 50%;
            width: 4px;
            background-color: #000;
            margin: 0 auto;
        }

        /* 设置秒针容器 */
        .sec_wrapper{
            height: 90%;
            width: 90%;
            /* background-color: #bfa; */
            animation-name: running;
            animation-duration: 60s;
            animation-timing-function: steps(60);
            animation-iteration-count: infinite;
        }
        /* 设置秒针 */
        .sec{
            height: 50%;
            width: 2px;
            background-color: red;
            margin: 0 auto;
        }

        /* 旋转的关键帧 */
        @keyframes running {
            from {
                transform: rotateZ(0);
            }

            to {
                transform: rotateZ(360deg);
            }
        }
    </style>

body

<body>
    <!-- 创建表的容器 -->
    <div class="clock">
        <!-- 创建时针容器 -->
        <div class="hour_wrapper">
            <!-- 创建时针 -->
            <div class="hour">
                
            </div>
        </div>

        <!-- 创建分针容器 -->
        <div class="min_wrapper">
            <!-- 创建时针 -->
            <div class="min">
                
            </div>
        </div>

        <!-- 设置秒针容器 -->
        <div class="sec_wrapper">
            <!-- 创建秒针 -->
            <div class="sec">
                
            </div>
        </div>
    </div>
</body>

运行结果

在.min_wrapper部分里,设置animation简写属性之后,该钟表的分针并未开始移动

我的解答思路和尝试过的方法

尝试过将animation的全部属性都在简写属性钟体现出来,但依旧没有任何改变

我想要达到的结果

麻烦请大家帮我看一下,我是哪个步骤出错了,这个练习我是跟着尚硅谷的鸭子表视频进行练习的,视频中,超哥的简写属性只写了name, duration和timing-function这三个值,就可以运行。所以我不知道我是那个地方没有写对

running换一个名称,如running1