html的过渡变形和动画

CSS3 Transitions

CSS3提供了transition属性，它可以用来定义元素从一个状态到另一个状态的过渡效果。这个属性可以应用于任何CSS属性，包括颜色、位置、大小等。例如：

​
​
.element {
  transition: all 1s ease-in-out; /* 应用到所有属性 */
}

​

​

在这个例子中，当.element的任何CSS属性发生变化时，都会有一个持续1秒的平滑过渡效果。

CSS3 Animations

CSS3还提供了animation属性，它允许你定义一系列的关键帧，这些关键帧定义了动画序列。例如：

​
@keyframes exampleAnimation {
  from { background-color: #f9c; }
  to { background-color: #c9f; }
}

.element {
  animation: exampleAnimation 2s infinite;
}

​

在这个例子中，.element的背景色将在2秒内从黄色变为蓝色，并且这个动画会无限循环播放。

CSS3 Transform

CSS3的transform属性可以用来对元素进行2D和3D变换，如旋转、缩放、倾斜等。例如：

​
.element {
  transform: rotate(360deg);
}

​

在这个例子中，.element将围绕其中心轴旋转360度。

请记住，为了确保兼容性，你可能需要在属性前面加上浏览器特定的前缀，如-webkit-transform、-moz-transform等。

CSS过渡（Transitions）

CSS过渡属性transition允许您在元素的CSS属性值发生变化时，创建平滑的过渡效果。这个属性可以应用于任何可以接受值的CSS属性，如width、height、color等。

• transition-property: 指定要过渡的属性名称。
• transition-duration: 指定过渡效果的持续时间，单位为秒(s)或毫秒(ms)。
• transition-delay: 指定过渡效果开始前的延迟时间，单位为秒(s)或毫秒(ms)。
• transition-timing-function: 指定过渡效果的时间曲线，如linear、ease、ease-in、ease-out、ease-in-out或自定义的cubic-bezier函数。

CSS动画（Animations）

CSS动画属性animation允许您定义关键帧，并在这些关键帧之间创建平滑的动画效果。

• animation-name: 指定动画的名称，对应于@keyframes定义的关键帧集。
• animation-duration: 指定动画完成一个周期所需的时间长度。
• animation-timing-function: 指定动画如何完成一个周期的时间曲线。
• animation-delay: 指定动画在开始前需要等待的时间。
• animation-iteration-count: 指定动画播放的次数，可以是特定的数字或者infinite表示无限循环。
• animation-direction: 规定动画在每次循环时的播放方向，如normal、reverse、alternate、alternate-reverse。
• animation-fill-mode: 定义动画在开始前和结束后的状态，如none、forwards、backwards、both。
• animation-play-state: 控制动画是否正在运行或暂停，如running、paused。

CSS变形（Transform）

CSS变形属性transform允许您对元素进行2D和3D变换，如旋转、缩放、倾斜和平移。

• transform: 指定一个或多个2D或3D变换函数，如rotate、scale、skew、translate等。
• transform-origin: 指定变换的原点，默认为50% 50%，即元素的中心点。
• transform-style: 指定如何在3D空间中呈现元素，如flat、preserve-3d。