-
使用
@keyframes
规则:- 使用
@keyframes
规则定义动画的关键帧,然后将其应用于元素的animation
属性上。例如:@keyframes example { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .animated-element { animation: example 2s ease-in-out infinite; }
这个例子定义了一个淡入淡出的动画,并使其无限循环播放。
- 使用
@keyframes
属性:
-
@keyframes
规则的名称:定义了动画的名称,格式为@keyframes name
,其中name
是动画的名称。 -
关键帧声明:在
@keyframes
规则内部,通过指定百分比或关键字(如from
和to
)来描述动画的不同阶段。0%
或from
:定义动画开始时的样式。100%
或to
:定义动画结束时的样式。n%
:定义动画在执行过程中的某个中间阶段的样式,其中n
是一个介于 0 和 100 之间的数字。
-
CSS 属性和值:在每个关键帧中,可以指定任意数量的 CSS 属性及其值,以定义动画中每个阶段元素的样式变化。
例如,一个简单的 @keyframes
规则可以如下所示:
@keyframes example {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
opacity: 0.8;
}
100% {
transform: scale(1);
}
}
transition
过渡:
transition
允许你在元素状态改变时平滑过渡到新的样式。你可以定义过渡的属性、持续时间、以及过渡的速度曲线。例如:
.transition-element {
transition: width 0.5s ease-in-out;
}
.transition-element:hover {
width: 200px;
}
1.transition-property:指定要过渡的 CSS 属性的名称。可以是单个属性名,多个属性名,或者是关键字 all
,表示所有属性都会过渡。例如:
transition-property: width;
transition-property: background-color;
transition-property: width, height, background-color;
transition-property: all;
2.transition-duration:指定过渡效果持续的时间,以秒(s)或毫秒(ms)为单位。例如:
transition-duration: 0.3s;
3.transition-timing-function:指定过渡效果的时间函数,即动画速度的变化曲线。常见的值有 linear
(线性)、ease
(缓入缓出,默认值)、ease-in
(加速)、ease-out
(减速)、ease-in-out
(先加速后减速)等。例如:
transition-timing-function: ease-in-out;
4.transition-delay:可选,指定过渡效果开始前延迟的时间。用于延迟过渡的触发。例如:
transition-delay: 0.2s;
这些属性可以单独使用,也可以一起组合使用,形成完整的过渡效果定义。例如:
/* 将宽度和背景颜色的变化进行过渡,持续时间为0.5秒,速度曲线为ease-in-out,延迟0.1秒 */
transition: width 0.5s ease-in-out 0.1s, background-color 0.5s ease-in-out 0.1s;
animation
属性:
animation
属性结合 @keyframes
规则可以实现更复杂的动画效果。你可以定义动画的名称、持续时间、速度曲线、延迟和播放次数等。
-
animation-name: 指定要应用的关键帧动画的名称。可以是已经在
@keyframes
规则中定义过的名称。 -
animation-duration: 指定动画完成一个周期所花费的时间,以秒(s)或毫秒(ms)为单位。
-
animation-timing-function: 指定动画的时间进度曲线,即控制动画在其持续时间内如何变化。常见的值有
ease
(默认值,慢-快-慢)、linear
(匀速)、ease-in
(慢开始)、ease-out
(慢结束)、ease-in-out
(慢开始和结束)等。 -
animation-delay: 指定动画开始之前的延迟时间,以秒(s)或毫秒(ms)为单位。
-
animation-iteration-count: 指定动画循环的次数,默认值为
1
,可以设置为具体的次数或infinite
表示无限循环。 -
animation-direction: 指定动画播放的方向,可选值有
normal
(默认,正常播放)、reverse
(反向播放)、alternate
(交替播放,正向反向交替)、alternate-reverse
(反向交替播放)。 -
animation-fill-mode: 指定动画执行之前和之后如何应用样式。常见的值包括
none
(默认,不改变样式)、forwards
(动画结束后应用最后一帧的样式)、backwards
(动画播放前应用第一帧的样式)、both
(向前和向后都应用样式)。 -
animation-play-state: 指定动画的播放状态,可以是
running
(运行)或paused
(暂停)。用来控制动画的启停状态。
例如 :
.animated-element {
animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
JavaScript 操作 classList
:
const element = document.querySelector('.animated-element');
element.classList.add('slide-in');
在这种方法中,可以在 CSS 中定义 .slide-in
类的样式,例如使用 @keyframes
或 transition
。
这些方法各有特点,选择哪种取决于你想要实现的动画效果的复杂性和需求。