CSS 动画备忘单

CSS 动画是我们网页设计中非常重要的一部分，它可以让网站变得更加生动和有趣，同时提高用户体验。下面是一些有用的 CSS 动画备忘单，帮助你创建自己的动画。

基础动画

Transition 过渡动画

在元素状态改变时，过渡动画可以使它们平滑过渡，避免突兀的变化。

/* 用法 */
transition: [property] [duration] [timing-function] [delay];

/* 示例 */
/* 鼠标移入时颜色过渡 */
div {
  transition: background-color 0.3s ease;
}
div:hover {
  background-color: blue;
}

Animation 关键帧动画

通过关键帧规则，可以创建更加复杂的动画，包括循环、回放和暂停等效果。

/* 用法 */
@keyframes [animation-name] {
  from { [property]: [value]; }
  to { [property]: [value]; }
}

/* 示例 */
/* 弹跳动画 */
div {
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

Transform 变形动画

通过 transform 属性可以实现元素的变形，包括旋转、缩放、移动和倾斜等效果。

/* 用法 */
transform: [transform-function];

/* 示例 */
/* 旋转动画 */
div {
  transform: rotate(360deg);
  transition: transform 1s ease-in-out;
}
div:hover {
  transform: rotate(0deg);
}

高级动画

Transitions 过渡动画

通过在元素的不同状态之间应用过渡动画，可以实现更加自然的效果。

/* 用法 */
div {
  transition: [property] [duration] [timing-function] [delay];
}

/* 示例 */
/* 渐变动画 */
div {
  background-color: red;
  transition: background-color 1s ease-in-out;
}
div:hover {
  background-color: blue;
}

Transform 视差动画

通过同时使用多个 transform 函数，可以实现更加生动的动画效果。

/* 用法 */
transform: [transform-function] [transform-function];

/* 示例 */
/* 视差动画 */
div {
  transform: translateX(-50%) rotate(45deg) translateX(50%);
  transition: transform 1s ease-in-out;
}
div:hover {
  transform: translateX(-50%) rotate(-45deg) translateX(50%);
}

Animation 主题动画

通过使用 CSS 变量，可以创建具有主题效果的动画，使网站更加个性化。

/* 用法 */
:root {
  --primary-color: #ff0000;
}
div {
  animation: change-color 2s infinite;
}
@keyframes change-color {
  0%, 100% {
    background-color: var(--primary-color);
  }
  50% {
    background-color: white;
  }
}

/* 示例 */
/* 更改主题颜色动画 */
:root {
  --primary-color: #ff0000;
}
button {
  background-color: var(--primary-color);
  transition: background-color 1s ease-in-out;
}
button:hover {
  --primary-color: #0000ff;
}

结论

CSS 动画是网页设计中非常重要的一部分，帮助我们实现更加生动、有趣和个性化的效果。无论是基础还是高级动画，我们都可以灵活运用来实现自己想要的效果。