CSS 动画


@keyframes

@keyframes在css中控制动画中间的关键帧.

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
			

from 代表开始针, to代表结束帧, 当然也可以使用0%~100%

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}
			

animation