你正在寻找的CSS3 动画技术

CSS3 动画技术是指使用 CSS3 属性和选择器来实现网页元素的动画效果。以下是一个完整攻略，帮助你学习如何使用 CSS3 动画技术。

使用CSS3的动画属性

CSS3 提供了很多用于创建动画的属性，这些属性包括：

• animation-name: 指定动画需要应用到的元素
• animation-duration: 指定动画的持续时间
• animation-timing-function: 指定动画的速度曲线
• animation-delay: 指定动画开始之前的延迟时间
• animation-iteration-count: 指定动画的播放次数
• animation-direction: 指定动画是正向播放还是反向播放
• animation-fill-mode: 指定动画结束时元素应该怎样保持状态

一个常见的例子是创建一个移动的方形：

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

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

在这个例子中，我们创建了一个名为 move 的动画，它会从左到右移动方形。我们将 animation-name 属性设置为 move，这样就可以将动画应用到 .box 元素上。

动画的关键帧由 @keyframes 声明。在 move 动画中，我们设置了三个关键帧，每一个都是通过设置 left 属性来实现的。动画会在 2 秒钟内循环播放，并且使用 ease-in 的速度函数来确定动画开始时的速度。

使用CSS3的transition属性

CSS3 还提供了另一种方式来创建动画，即使用 transition 属性。与使用 animation 属性不同，使用 transition 可以让你在状态改变时过渡到新状态，而不是创建一个完整的动画。

一个示例代码：

.box2 {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
  transition: all 2s ease-in-out;
}

.box2:hover {
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
}

我们用 transition 属性来定义状态过渡所需的时间、速度函数和属性。这里的 all 实际上是指定了所有属性。

当鼠标悬停在 .box2 元素上时，会发生状态改变。使用 :hover 状态获取悬停的状态。

在这个例子中，将 .box2 元素从 100 像素放大到 200 像素，并且向左移动和向上移动。同时改变背景颜色。通常改变的属性需要与定义的 transition 对应。

这是两个常见的 CSS3 动画技术，当然，还有很多其他的属性和选择器。在实际开发中，你可以使用这些属性和选择器来创建个性化的动画效果。