keyframe animationで左右にゆらすアニメーション

by iwbjp

HTML

<div id="s">sample</div>

CSS

#s {
  margin-left: 50px;
  padding: 50px 0;
  width: 200px;
  background: #EEE;
  border: 1px solid #CCC;
  text-align: center;
  
  animation: a 3s ease-out infinite;
}

@keyframes a {
  0% {
    transform: translateX( 10px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX( 10px);
  }
}