Question

我似乎无法让我的动画工作。我希望它旋转180度，没有任何事情发生。我把我的代码放在了错误的位置吗？这是我的CSS代码：

@keyframes headerspin {
    from {
        transform: rotation(0deg);
    }

    to {
        transform: rotation(180deg);
    }
}

这是我尝试插入动画的地方：

img#headergif {
    animation-name: headerspin;
    animation-duration: 1.5s;
}

Answer 1

而不是transform: rotation(0deg);使用transform: rotate(0deg);

＆＃13;

div {
            width: 100px;
            height: 100px;
            background-color: red;
            -webkit-animation-name: example;
            -webkit-animation-duration: 4s;
            animation-name: example;
            animation-duration: 4s;
        }
        
        @keyframes example {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(180deg);
            }
        }

＆＃13;

<!DOCTYPE html>
<html>
<body>

    <div></div>

</body>

</html>

＆＃13;

试图让我的旋转动画工作。怎么了？

1 个答案: