CSS中2d动画

CSS是一种用于设计网页外观的语言。它不仅仅可以实现网页的布局，还可以创建漂亮的动画效果。本文将介绍CSS中的2d动画。

/* 使用CSS中的@keyframes定义动画，关键帧为0%和100% */
@keyframes move {
  0% {
    transform: translate(0,0);
  }
  100% {
    transform: translate(200px,200px);
  }
}

/* 使用CSS选择器定义动画应用到哪个元素上 */
.Box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: move; /* 指定动画名称 */
  animation-duration: 2s; /* 动画时长 */
  animation-iteration-count: infinite; /* 动画循环播放 */
  animation-direction: alternate; /* 动画交替播放 */
}

上述代码定义了一个名为`move`的动画，它使一个元素从原点移动到(200px,200px)。在.Box选择器中指定了动画的名称、时长、循环次数和播放方式。

除了translate函数，CSS中还有rotate、scale、skew等函数可以调整元素的位置、旋转角度、缩放比例和斜切角度等属性，从而创造出更加多彩的动画效果。