CSS中那些好玩的东西——过渡、转换与动画

2023-11-16 09:08:59

CSS3中新增了许多动画相关的特性，如过渡、转换和动画，让网页变得更加灵动、有趣。

过渡 transition

过渡，顾名思义，就是让元素从一种状态变化到另一种状态的平滑过程。过渡适用于以下属性：

background-color
color
border
border-radius
opacity
box-shadow
transform

语法：

transition: property duration timing-function delay;

property：要设置过渡效果的CSS属性，可以是一个或多个，用空格隔开。
duration：过渡持续时间，可以是数字（单位为秒）或百分比（相对于父元素过渡持续时间）。
timing-function：过渡效果的动画曲线，可以是linear、ease、ease-in、ease-out、ease-in-out等。
delay：过渡延迟时间，可以是数字（单位为秒）或百分比（相对于父元素过渡延迟时间）。

示例：

/* 鼠标悬停时，元素背景颜色从红色渐变到蓝色 */
.element:hover {
  background-color: blue;
  transition: background-color 1s ease-in-out;
}

转换 transform

转换，是指改变元素的位置、大小、旋转角度、倾斜角度等。转换适用于以下属性：

translate
scale
rotate
skew

语法：

transform: property value;

property：要设置转换效果的CSS属性，可以是一个或多个，用空格隔开。
value：转换的值，可以是数字、百分比或关键词。

示例：

/* 将元素向右移动100px */
.element {
  transform: translateX(100px);
}

/* 将元素放大两倍 */
.element {
  transform: scale(2);
}

/* 将元素旋转45度 */
.element {
  transform: rotate(45deg);
}

/* 将元素向右倾斜30度 */
.element {
  transform: skewX(30deg);
}

动画 animation

动画，是指让元素在一段时间内执行一系列的转换。动画可以一次性执行，也可以无限循环执行。

语法：

animation: name duration timing-function delay iteration-count direction;

name：动画的名称，用于在CSS中引用动画。
duration：动画持续时间，可以是数字（单位为秒）或百分比（相对于父元素动画持续时间）。
timing-function：动画效果的动画曲线，可以是linear、ease、ease-in、ease-out、ease-in-out等。
delay：动画延迟时间，可以是数字（单位为秒）或百分比（相对于父元素动画延迟时间）。
iteration-count：动画执行次数，可以是数字（正整数或infinite）或关键词（infinite）。
direction：动画执行方向，可以是normal或alternate。

示例：

/* 定义一个名为"fade-in"的动画 */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 将元素淡入 */
.element {
  animation: fade-in 1s ease-in-out;
}