CSS 过渡(transition)和动画(animation)是用来实现元素在不同状态下的平滑过渡和动画效果的属性。
过渡的基本语法如下:
transition: 属性名 过渡时间 过渡类型 延迟时间;
属性名
:指定要进行过渡的 CSS 属性,可以是单个属性,也可以是多个属性,用逗号分隔。过渡时间
:指定过渡的持续时间,可以使用秒(s)或毫秒(ms)作为单位。过渡类型
:指定过渡的类型,常用的值有ease
(默认值,缓慢开始,缓慢结束)、linear
(匀速进行)、ease-in
(慢慢开始)、ease-out
(慢慢结束)、ease-in-out
(慢慢开始,慢慢结束)等。延迟时间
:指定过渡开始之前的延迟时间,可以使用秒(s)或毫秒(ms)作为单位。
动画的基本语法如下:
animation: 动画名称 动画持续时间 动画类型 延迟时间 动画次数 动画方向 动画填充模式;
动画名称
:指定动画的关键帧名称,可以在@keyframes
规则中定义。动画持续时间
:指定动画的持续时间,可以使用秒(s)或毫秒(ms)作为单位。动画类型
:指定动画的类型,常用的值有linear
(匀速进行)、ease
(缓慢开始,缓慢结束)、ease-in
(慢慢开始)、ease-out
(慢慢结束)、ease-in-out
(慢慢开始,慢慢结束)等。延迟时间
:指定动画开始之前的延迟时间,可以使用秒(s)或毫秒(ms)作为单位。动画次数
:指定动画的播放次数,可以使用整数、小数、infinite(无限播放)等值。动画方向
:指定动画的播放方向,常用的值有normal
(正常顺序播放)、reverse
(逆序播放)、alternate
(交替正序逆序播放)、alternate-reverse
(交替逆序正序播放)等。动画填充模式
:指定动画在播放前和播放后的样式效果,常用的值有none
(无填充效果)、forwards
(保持动画结束时的样式)、backwards
(保持动画开始时的样式)、both
(保持动画开始和结束时的样式)等。
下面是一个简单的过渡效果的例子:
.box {width: 100px;height: 100px;background-color: red;transition: width 1s;
}.box:hover {width: 200px;
}
上述代码定义了一个名为 .box
的元素,当鼠标悬停在该元素上时,宽度会从 100px 过渡到 200px,过渡的持续时间为 1 秒。
下面是一个简单的动画效果的例子:
@keyframes slide-in {0% {transform: translateX(-100%);}100% {transform: translateX(0%);}
}.box {width: 100px;height: 100px;background-color: red;animation: slide-in 1s ease-in-out;
}
上述代码定义了一个名为 slide-in
的关键帧,在动画中,元素从左侧滑动进入。.box
元素应用了这个动画,持续时间为 1 秒,使用了缓慢开始和缓慢结束的动画类型。