css动画both |css中h5垂直居中

animation: myanimation 2s both infinite;

both指定了动画的执行方式，即动画在正向播放和反向播放时都将执行相同的动画效果。也就是说，如果动画在向前播放时使元素移动到屏幕的右侧，并在向后播放时使元素移动到屏幕的左侧，那么both将使它在向前和向后播放时都产生相同的效果。当然，如果大家不想让动画向后播放时有任何效果，大家可以通过指定动画的方向属性来解决这个问题：

animation-direction: normal, reverse;

这个例子中，动画方向被设置为正向和反向。normal表示正向播放，reverse表示反向播放。

@keyframes myanimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}

这段代码定义了一个名为“myanimation”的关键帧动画。在动画播放时，元素将从原始位置向右平移200像素，然后反向平移回来。这个动画将无限循环，因为它的iteration-count属性被设置为infinite。

总的来说，使用both属性可以使动画更加丰富有趣。它可以使动画在正向和反向播放时都具有相同的效果，从而提高页面的用户体验。这个动画属性的应用范围非常广泛，大家可以根据自己的需求进行不同的设置，来增强页面的交互性。