这是图片由变大到正常大小，并且正常显示。
img{transform-origin: center center;  width:100%; animation: daxiao 3s ease;}
@keyframes daxiao{
  from {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}

最简语法结构
@keyframes 动画名称 {
  0% { /* 初始状态样式 */ }
  50% { /* 中间状态样式 */ }
  100% { /* 结束状态样式 */ }
}

让一个方块水平向右移动200px
HTML‌：
<div class="box"></div>
‌CSS‌：
.box {
  width: 50px;
  height: 50px;
  background: red;
  /* 应用动画：名称 时长 速度曲线 重复次数 */
  animation: move 2s ease infinite;
}
 
/* 关键帧动画 */
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

动画时间轴控制
css

animation: 动画名称 | 时长 | 速度曲线 | 延迟 | 次数 | 方向;

‌常用属性表‌：

属性    可选值    默认值
animation-name    自定义的动画名称    none
animation-duration    时长（如：2s / 500ms）    0s
animation-timing-function    ease / linear / ease-in-out等    ease
animation-delay    延迟开始时间（如：1s）    0s
animation-iteration-count    数字 / infinite    1
animation-direction    normal / reverse / alternate    normal

‌示例‌：让方块先快后慢，延迟1秒执行，来回运动3次(在三中示例代码中改变即可看到效果)
animation: move 2s ease-in-out 1s 3 alternate;

 

浏览器兼容性处理

‌主流浏览器‌：Chrome/Firefox/Safari/Edge 等现代浏览器全支持
‌老旧浏览器‌：需要添加前缀（可使用PostCSS自动添加）

@-webkit-keyframes {} /* Chrome/Safari */
@-moz-keyframes {} /* Firefox */
@-o-keyframes {} /* Opera */