Skip to main content

过渡和动画

动画​

@keyframes anim-1 {
  50% {
    border-radius: 50%;
  }
}
animation: anim-1 1s;
  1. animation-name: 动画的名称，可以是自定义的或预设的动画名称
  2. animation-duration: 动画的持续时间
  3. animation-timing-function: 动画的缓动函数，用来控制动画的速度曲线
  4. animation-delay: 动画的延迟时间，可以使动画在指定时间后开始
  5. animation-iteration-count: 动画的播放次数，可以设置为无限循环播放
  6. animation-direction: 动画的播放方向，可以是正向播放、反向播放、交替播放等
  7. animation-fill-mode: 动画的填充模式，用来控制动画在播放前后的状态，可以设置为保持最后状态、保持初始状态等
  8. animation-play-state: 动画的播放状态，可以控制动画的暂停、播放等状态。
  9. 这些属性可以单独使用，也可以组合使用来实现复杂的动画效果

实现钟摆效果​

animation 动画 clock 2s 执行一次 linear infinite clock 0 25 50 75 100 分别有不同的 transform:rotate

*transform-origin: top center; 指定旋转支点！

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width:150px;
            height:400px;
            background: url("clock.png") no-repeat;
            margin: auto;
            /* animation : 动画的名字 时间  匀速  无限 */
            animation:clock 2s linear infinite;
            transform-origin: top center;
        }
        @keyframes clock{
            0%{
                transform: rotate(0deg);
            }
            25%{
                transform: rotate(45deg);
            }
            50%{
                transform: rotate(0deg);
            }
            75%{
                transform: rotate(-45deg);
            }
            100%{
                transform: rotate(0deg);
            }
        }
    </style>


<body>
    <div class="box"></div>
</body>