<div id="gonderGelsin">Harekette bereket vardır.</div>
@keyframes 'gonder' { 
from {
  margin-left:100%;
  width:300%
}

to {
  margin-left:0%;
  width:100%;
}
}


#gonderGelsin {
  background:#f00;
  color:#fff;
  padding:5px 10px;
  animation-name: gonder; 
  animation-duration: 3s;
  animation-timing-function:ease;
  animation-iteration-count: 3;
  animation-direction:alternate-reverse;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.