用CSS写一段从上到下滚动，效果相对顺滑过度的代码

一、源码展示

1.html代码段

<div class="marquee">  
  <ul>  
    <li>第一条滚动文字</li>  
    <li>第二条滚动文字</li>  
    <li>第三条滚动文字</li>  
    <!-- 添加更多滚动文字... -->  
  </ul>  
</div>

2.css代码段

.marquee {  
  width: 100%;  
  overflow: hidden;  
  border: 1px solid #ccc;  
  padding: 10px 0;  
  height:100%;
}  
  
.marquee ul {  
  list-style: none;  
  margin: 0;  
  padding: 0;  
  width: 100%;  
  overflow: hidden; 
  animation: marquee 5s linear infinite; /* 应用滚动动画，意思是定义了一个名为animation的动画效果，以相同的速度持续5秒，无限次循环，每次动画结束后重新开始动画 */ 
}  
  
.marquee li {  
  display: inline-block;  
  padding-right: 100%; /* 确保所有元素在一行上 */  
  white-space: nowrap; /* 防止换行 */  
}  
  
@keyframes marquee {  
  0% { transform: translateY(-120%); } /* 初始位置（让元素从页面顶端出现，为了避免内容出现时过于卡顿，所以取巧没有设置为-100%），同理如果左右动画就用translateY */  
  50% { transform: translateY(0); }	/* (此行在示例效果中可省略)走到中间的时候元素全部显示 */ 
  100% { transform: translateY(100%);} /* 滚动到最下边，直至消失 */   
}

二、@keyframes与animation的用法

1.@keyframes

@keyframes是CSS中的一个关键帧动画定义，用于创建动画。使用@keyframes可以指定一系列关键帧，每个关键帧定义了动画中的特定状态，浏览器会根据这些关键帧自动生成中间帧，从而实现平滑的动画效果。

@keyframes的用法如下:

定义动画名称：在@keyframes规则中，需要指定一个动画名称，以便在CSS中引用该动画。

定义关键帧：在@keyframes规则中，需要定义一系列的关键帧，每个关键帧表示动画中的一个状态。关键帧使用百分比或关键词"from"和"to"来指定时间点。

@keyframes myAnimation {  
  0% { /* 动画开始时的样式 */ }  
  50% { /* 动画中间时的样式 */ }  
  100% { /* 动画结束时的样式 */ }  
}

2.animation

CSS中的animation是一个简写属性，用于设置六个动画属性。以下是这些属性的详解：

A.animation-name：此属性用于指定动画的名称。可以通过@keyframes来定义一个动画，然后将动画名称赋给animation-name参数，就可以在元素上应用这个动画了。

B.animation-duration：此属性用于指定动画的持续时间，单位为秒或毫秒。可以通过调整这个参数的值来控制动画的速度和持续时间。

C.animation-timing-function：此属性用于指定动画将如何完成一个周期。例如，可以使用“ease”（默认）使动画以低速开始，然后加快，在结束前变慢；或者使用“linear”使动画从头到尾的速度相同。

D.animation-delay：此属性用于指定动画在开始前等待的时间，以秒或毫秒计。默认值为0，意味着动画会立即开始。

E.animation-iteration-count：此属性用于规定动画应该播放的次数。可以指定具体的数字，也可以使用“infinite”使动画无限循环。

F.animation-direction：此属性用于定义是否应该轮流反向播放动画。可以取值“normal”（默认值，每个周期结束时重新开始动画）、“reverse”（反向播放）、“alternate”（轮流反向播放）或“alternate-reverse”（反向轮流播放）。

以上六个属性都可以通过animation这个简写属性来设置。例如：

div {  
  animation: oreAnimation 5s ease 2s infinite alternate;  
}

在这个例子中，div元素应用了一个名为oreAnimation的动画，该动画持续时间为5秒，采用ease缓动函数，延迟2秒开始，并无限循环反向播放。

注意：

CSS中的animation属性可以同时应用多个动画，但它们的执行顺序和时间分配是由animation-name、animation-duration、animation-delay等属性控制的。

如果为元素指定了多个动画，浏览器会按照animation-name属性的顺序执行它们。如果没有指定animation-duration或animation-delay，则所有动画会同时开始执行，但它们的执行时间可能会重叠。