CSS动画可以让网站变得更加生动,吸引人们的眼球。而为了让动画可以自由的适应各种尺寸,我们就需要使用百分比。/ 使用百分比控制动画 / keyframes example { / 百分比指示动画的进度...
CSS动画可以让网站变得更加生动,吸引人们的眼球。而为了让动画可以自由的适应各种尺寸,我们就需要使用百分比。
/* 使用百分比控制动画 */
@keyframes example {
/* 百分比指示动画的进度 */
0% {
/* 初始状态 */
transform: translateX(0%);
}
100% {
/* 结束状态 */
transform: translateX(100%);
}
} 在这个例子中,我们使用了@keyframes关键字来定义一个名为example的动画。在动画中,我们使用了两个关键帧,分别在0%和100%的位置,并使用transform属性在这两个关键帧中设置不同的值。
在初始状态中,transform属性中使用的是translateX(0%),也就是在X轴方向上没有偏移。而在结束状态中,我们使用的是translateX(100%),也就是在X轴方向上偏移了整个父容器的宽度。
这样,无论父容器的宽度是多少,动画都可以自适应地变化,达到更好的效果。