CSS动画 关键帧

关键帧

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes

• 起始/结束状态
  一个动画就是从from → to的过程, 这两个状态称为起始和结束状态. 也叫0% → 100%.

如果一个关键帧规则没有指定动画的开始或结束状态，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。

• 中间状态
  可以定义0% → 100%之间的中间状态.

闪烁和360*旋转

.h1 {
    font-size: 58px;
    animation:
        flash .4s infinite,
        rotate .5s infinite;
}
@keyframes flash {
    0% {
        color: green;
    }
    100% {
        color: pink;
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}