h5甩屏动画

H5甩屏动画可以通过CSS3的动画属性实现。以下是一个简单的例子：

HTML代码：

<div class="screen"></div>

CSS代码：

.screen {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: shake 0.5s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes shake {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  20% {
    transform: translate(-50%, -50%) rotate(15deg);
  }
  40% {
    transform: translate(-50%, -50%) rotate(-10deg);
  }
  60% {
    transform: translate(-50%, -50%) rotate(5deg);
  }
  80% {
    transform: translate(-50%, -50%) rotate(-5deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

这个例子中，我们创建了一个宽高为100px的红色div作为屏幕，通过CSS的position和transform属性将其居中显示。然后通过animation属性和keyframes关键字定义了一个名为shake的动画，将屏幕进行左右晃动的效果。最后通过animation-iteration-count属性将动画播放次数设置为1次，避免多次播放。