css上下切换动画效果代码

在网页设计中，动画效果可以增强页面的交互性、视觉吸引力和用户体验。下面我们来学习一种使用CSS实现的上下切换动画效果。

.container{
  height: 300px;
  width: 200px;
  overflow: hidden;
}

.container > div{
  height: 100%;
  width: 100%;
  position: relative;
}

.container > div > p{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.container > div:first-child > p:first-child{
  opacity: 1;
}

.container > div > p{
  animation-name: upDown;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.container > div > p:first-child{
  animation-direction: alternate;
}

.container > div > p:last-child{
  animation-direction: reverse;
}

@keyframes upDown{
  0%{transform: translateY(-100%);}
  50%{opacity: 1;}
  100%{transform: translateY(100%);}
} 

上面的代码将一个高度为300px，宽度为200px的容器设置为隐藏溢出，并且使用两个子元素来实现上下切换的效果。首先，我们将第一个子元素中的第一个paragraph元素的opacity属性设置为1，使其显示在容器中。接着，我们定义动画名称为upDown，使用translateY来控制元素的上下移动，并且改变其透明度属性实现淡入淡出的效果，然后将动画时间、动画函数和动画次数等属性设置为适当的值。

最后，我们在第二个子元素中的第一个paragraph元素的动画方向设置为alternate，让它先从上往下移动，然后再从下往上移动，使得过渡更加平滑自然，而在最后一个paragraph元素的动画方向设置为reverse，实现从下往上移动的效果。

通过上面的这段代码，我们可以很容易地实现一个简单的上下切换动画效果，从而增强页面的交互性和视觉效果，提高用户的体验。