钟摆旋转钟摆旋转在上述的代码中，实现了钟摆的摆动。 transform MDN文档要

钟摆旋转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            margin: 50%;
            transform-origin: center top;
            animation: test 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .line{
            margin-left: 4.5px;
            width: 1px;
            height: 50px;
            background-color: black;
        }

        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: blue;
        }

        @keyframes test {
            0%{
                transform: rotate(45deg);
            }
            25%{
                transform: rotate(0deg);
            }
            50%{
                transform: rotate(-45deg);
            }
            75%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(45deg);
            }
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="line"></div>
        <div class="ball"></div>
    </div>

</body>

</html>

在上述的代码中，实现了钟摆的摆动。

`transform`

MDN文档

要实现钟摆的旋转，就要碰到旋转的问题。

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

transform: rotate()可以旋转我们的钟摆，但是，直接设置旋转会从中心点进行旋转。

所以，我们需要设置旋转的起点。transform-origin CSS属性让你更改一个元素变形的原点。

`animation`

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。从头到尾以相同的速度播放动画：animation-timing-function: linear;

animation-iteration-count CSS 属性,定义动画在结束前运行的次数,可以是1次也可以是无限循环。infinite无限循环播放动画。