CSS3中的@keyframes关键帧动画的选择器绑定

@keyframes是CSS3中非常强大的动画制作功能，可以实现很多炫酷的动画效果。其中，选择器绑定是@keyframes动画中一个非常重要的部分，可以让我们选择运用动画效果的具体元素。

选择器绑定的语法格式如下：

@keyframes animation-name {
  selector {
    property: value;
  }
}

其中，animation-name为动画名称，selector为需要运用动画效果的元素选择器，property和value为需要改变的属性名称和值。

下面给出两个示例说明：

示例一

在这个示例中，我们将为一组图片设置旋转动画。HTML代码如下：

<div class="img-wrapper">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

我们首先需要定义@keyframes动画，代码如下：

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

接着，我们需要通过选择器绑定将动画绑定在img元素上，代码如下：

.img-wrapper img {
  animation: rotate 2s linear infinite;
}

其中，animation属性用来定义元素的动画效果，一共包含四个参数，分别为动画名称、动画时长、动画的计时函数和动画的循环次数。本例中，我们让动画无限循环。

示例二

在这个示例中，我们将为一个按钮设置闪烁动画。HTML代码如下：

<button>Click me!</button>

我们首先需要定义@keyframes动画，代码如下：

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

接着，我们需要通过选择器绑定将动画绑定在button元素上，代码如下：

button {
  animation: blink 1s linear infinite;
}

其中，animation属性用来定义元素的动画效果，一共包含四个参数，分别为动画名称、动画时长、动画的计时函数和动画的循环次数。本例中，我们让动画无限循环。

以上就是@keyframes关键帧动画的选择器绑定的完整攻略。