变形transform相关 动画@keyframes、animation相关

变形（Transforms）是CSS3中的一项重要功能，它允许开发者改变元素的尺寸、位置、形状甚至扭曲等视觉效果。而`@keyframes`是CSS的关键帧动画（Animation Keyframe），用于定义动画的变化过程，通过指定一系列关键点（Keyframes）来描述动画从开始到结束的状态变化。

例如，你可以创建一个简单的动画：

@keyframes slideInLeft {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

.button {
  animation-name: slideInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

这个例子中，`.button` 元素会从左边平滑地滑入屏幕。`translateX(-100%)` 将元素向左移动其宽度的一倍，`translateX(0)` 则将其定位回正常位置。

`animation` 属性则用于应用已经定义好的动画，可以设置动画名称、持续时间、播放次数、延迟和其他一些属性。