CSS 动画关键帧

动画简介

CSS动画（Animation）使用@keyframes规则创建复杂的动画效果，比过渡更灵活。

基本语法

css

@keyframes animation-name {
  from {
    /* 起始状态 */
  }
  to {
    /* 结束状态 */
  }
}

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

@keyframes 规则

1. from/to 语法

css

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

2. 百分比语法

css

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

3. 多个属性

css

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

动画属性

1. animation-name（动画名称）

css

.element {
  animation-name: slideIn;
}

2. animation-duration（动画时间）

css

.element {
  animation-duration: 1s;
  animation-duration: 1000ms;
}

3. animation-timing-function（动画函数）

css

.element {
  animation-timing-function: ease;
  animation-timing-function: linear;
  animation-timing-function: ease-in;
  animation-timing-function: ease-out;
  animation-timing-function: ease-in-out;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

4. animation-delay（动画延迟）

css

.element {
  animation-delay: 0s;
  animation-delay: 0.5s;
}

5. animation-iteration-count（动画次数）

css

.element {
  animation-iteration-count: 1;      /* 1次 */
  animation-iteration-count: infinite; /* 无限次 */
  animation-iteration-count: 3;       /* 3次 */
}

6. animation-direction（动画方向）

css

.element {
  animation-direction: normal;         /* 正常 */
  animation-direction: reverse;         /* 反向 */
  animation-direction: alternate;       /* 交替 */
  animation-direction: alternate-reverse; /* 反向交替 */
}

7. animation-fill-mode（填充模式）

css

.element {
  animation-fill-mode: none;       /* 无（默认） */
  animation-fill-mode: forwards;   /* 结束状态 */
  animation-fill-mode: backwards;  /* 起始状态 */
  animation-fill-mode: both;       /* 起始和结束状态 */
}

8. animation-play-state（播放状态）

css

.element {
  animation-play-state: running;  /* 播放 */
  animation-play-state: paused;   /* 暂停 */
}

9. animation（简写）

css

.element {
  animation: slideIn 1s ease 0s infinite alternate forwards running;
}

常用动画效果

1. 淡入淡出

css

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

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

2. 滑动动画

css

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

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

3. 缩放动画

css

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}

4. 旋转动画

css

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

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

.element {
  animation: rotateInfinite 2s linear infinite;
}

5. 弹跳动画

css

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

6. 脉冲动画

css

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

7. 闪烁动画

css

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

8. 摇晃动画

css

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

实际应用

1. 加载动画

css

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

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

2. 进度条动画

css

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #007bff;
  animation: progress 3s ease-in-out forwards;
}

3. 提示框动画

css

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.alert {
  padding: 15px;
  background-color: #f8d7da;
  color: #721c24;
  border-radius: 4px;
  animation: slideInDown 0.5s ease forwards;
}

4. 卡片进入动画

css

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}

.card:nth-child(1) {
  animation-delay: 0.1s;
}

.card:nth-child(2) {
  animation-delay: 0.2s;
}

.card:nth-child(3) {
  animation-delay: 0.3s;
}

5. 悬停效果

css

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.element {
  animation: float 3s ease-in-out infinite;
}

6. 按钮点击效果

css

@keyframes clickEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.button:active {
  animation: clickEffect 0.2s ease;
}

性能优化

1. 使用 transform 和 opacity

css

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

2. 使用 will-change

css

.element {
  will-change: transform, opacity;
  animation: slideIn 1s ease;
}

3. 避免布局抖动

css

.element {
  position: relative;
  animation: slideIn 1s ease;
}

面试常见问题

1. CSS 动画的属性有哪些？

animation-name: 动画名称
animation-duration: 动画时间
animation-timing-function: 动画函数
animation-delay: 动画延迟
animation-iteration-count: 动画次数
animation-direction: 动画方向
animation-fill-mode: 填充模式
animation-play-state: 播放状态

2. @keyframes 的语法有哪些？

css

/* from/to 语法 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 百分比语法 */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

3. animation-fill-mode 的作用是什么？

animation-fill-mode 控制动画在播放前后的状态。

css

.element {
  animation-fill-mode: forwards;  /* 结束状态 */
}

4. 如何实现无限循环动画？

css

.element {
  animation-iteration-count: infinite;
}

5. 如何暂停动画？

css

.element {
  animation-play-state: paused;
}

通过理解CSS动画的各种属性和应用，可以创建丰富的动画效果。

CSS 动画关键帧 ​

动画简介 ​

基本语法 ​

@keyframes 规则 ​

1. from/to 语法 ​

2. 百分比语法 ​

3. 多个属性 ​

动画属性 ​

1. animation-name（动画名称） ​

2. animation-duration（动画时间） ​

3. animation-timing-function（动画函数） ​

4. animation-delay（动画延迟） ​

5. animation-iteration-count（动画次数） ​

6. animation-direction（动画方向） ​

7. animation-fill-mode（填充模式） ​

8. animation-play-state（播放状态） ​

9. animation（简写） ​

常用动画效果 ​

1. 淡入淡出 ​

2. 滑动动画 ​

3. 缩放动画 ​

4. 旋转动画 ​

5. 弹跳动画 ​

6. 脉冲动画 ​

7. 闪烁动画 ​

8. 摇晃动画 ​

实际应用 ​

1. 加载动画 ​

2. 进度条动画 ​

3. 提示框动画 ​

4. 卡片进入动画 ​

5. 悬停效果 ​

6. 按钮点击效果 ​

性能优化 ​

1. 使用 transform 和 opacity ​

2. 使用 will-change ​

3. 避免布局抖动 ​

面试常见问题 ​

1. CSS 动画的属性有哪些？ ​

2. @keyframes 的语法有哪些？ ​

3. animation-fill-mode 的作用是什么？ ​

4. 如何实现无限循环动画？ ​

5. 如何暂停动画？ ​