CSS动画可以让网页变得更加生动、有趣。在这篇文章中,我们将探讨两个基于CSS的动画,它们会按照向后顺序进行。/* 第一个动画 */ @keyframes slide-from-left { 0% {
CSS动画可以让网页变得更加生动、有趣。在这篇文章中,我们将探讨两个基于CSS的动画,它们会按照向后顺序进行。
/* 第一个动画 */ @keyframes slide-from-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } /* 第二个动画 */ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* 将两个动画应用到同一个元素上 */ .my-element { animation: slide-from-left 1s forwards, fade-in 0.5s forwards; }
上面的代码中,我们定义了两个关键帧动画。第一个动画是从左侧滑动元素进入屏幕中,第二个动画是将元素的透明度从0逐渐变为1,使其淡入。
在最后一行代码中,我们将这两个动画同时应用到同一个元素上。注意,我们使用了“forwards”关键字,以使元素保留在其最后一个动画结束时的状态。
运行这些动画的效果是令人印象深刻的。您可以在实际项目中使用它们来为您的用户带来更好的体验。
粉丝
0
关注
0
收藏
0