css animation 复刻

今天做了一个七巧板的小页面，发现对于css动画一些内容又有了新的认识，所以以下准备复习一遍

首先一共有以下属性

• @keyframes
• 如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
• animation-name
• 动画名称
• animation-duration
• animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。
• animation-delay
• 属性规定动画开始的延迟时间。
• animation-iteration-count
• 属性指定动画应运行的次数。
• animation-direction
• 属性指定是向前播放、向后播放还是交替播放动画。
• animation-timing-function
• 属性规定动画的速度曲线。
• animation-fill-mode
• CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。
• animation
• 综合以上六个属性