css动画

CSS动画是一种通过改变元素样式来实现动画效果的技术，它可以使网页更加生动、有趣，提高用户体验，CSS动画可以分为两种：过渡（transition）和动画（animation）。

过渡（transition）

过渡是一种简单的动画效果，可以实现元素的样式在不同状态之间的平滑切换，过渡需要指定元素的几个关键状态属性（如背景颜色、宽度等），以及这些属性在过渡过程中的变化速度。

1、基本语法

/* 定义过渡效果 */
transition: property duration timing-function delay;
/* 或者分别指定各属性 */
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay;

2、示例

/* 当鼠标悬停在按钮上时，背景颜色从透明变为蓝色，变化时间为0.5秒，速度先快后慢，延迟0.1秒开始 */
button {
  background-color: transparent;
  transition: background-color 0.5s ease-in-out 0.1s;
}
button:hover {
  background-color: blue;
}

动画（animation）

动画是一种更复杂的动画效果，可以实现元素的样式在一定时间内的连续变化，动画需要定义关键帧（keyframes），即元素在不同时间点的状态，浏览器会根据关键帧自动计算中间状态，实现平滑的动画效果。

1、基本语法

/* 定义动画名称 */
@keyframes animation-name {
  /* 定义关键帧 */
  from { property: value; }
  to { property: value; }
}
/* 应用动画 */
element {
  animation-name: animation-name;
  animation-duration: duration;
  animation-timing-function: timing-function;
  animation-delay: delay;
  animation-iteration-count: iteration-count;
  animation-direction: direction;
  animation-fill-mode: fill-mode;
}

2、示例

/* 定义一个旋转360度的动画 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* 应用动画 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: rotate;
  animation-duration: 2s; /* 动画持续时间为2秒 */
  animation-timing-function: linear; /* 动画速度为线性 */
  animation-delay: 1s; /* 动画延迟1秒开始 */
  animation-iteration-count: infinite; /* 动画无限循环 */
}

过渡与动画的区别

1、过渡只能实现元素的样式在不同状态之间的平滑切换，而动画可以实现元素的样式在一定时间内的连续变化，动画可以实现更复杂的效果。

2、过渡需要指定元素的几个关键状态属性，而动画需要定义关键帧，关键帧可以包含多个属性的变化，从而实现更丰富的动画效果。