css动画技术怎么做

CSS动画是一种通过CSS创建动画效果的技术。它使用CSS属性来控制动画的过程，包括动画的开始和结束时间、动画的速度、动画的方向等。下面是一些常用的CSS动画技术：

/* 以平移为例 */
div {
  position: relative;
  animation: move 5s infinite;
}

@keyframes move {
  0% {left: 0;}
  50% {left: 50%;}
  100% {left: 0;}
}

/* 需要添加 -webkit- 前缀以支持 Safari 和 Chrome */

上述代码是通过CSS实现平移动画效果的示例。我们首先定义一个 div 元素，并让它的位置为相对定位。接着，在元素上应用动画属性，我们使用了 animation 属性来命名动画的名称、持续时间和循环次数。在 keyframes 规则中，我们定义了动画的帧，从 0% 开始，到 50% 时元素移动到页面的右侧，最终回到起始位置。

/* 以旋转为例 */
div {
  position: relative;
  animation: rotate 3s infinite;
  transform-origin: center;
}

@keyframes rotate {
  from {transform: rotateX(0deg) rotateY(0deg);}
  to {transform: rotateX(360deg) rotateY(360deg);}
}

/* 需要添加 -webkit- 前缀以支持 Safari 和 Chrome */

上述代码是实现旋转动画效果的示例。这里我们定义了 transform-origin 属性来设置旋转中心点，然后通过 transform 属性来实现旋转动画，从 0deg 到 360deg。

总之，CSS动画技术能够使我们创建出更加生动、动态的页面，通过掌握基本的动画属性和颜色、边框等CSS属性的控制，能够实现更加复杂的动画效果。