[how to rotate like css trasform]

thanks your help~

[how to rotate like css trasform]

I created a flash animation, now I want to add to Html, but I have no idea how to rotate the cover, it always rotate more, does any have some idea? 

 

like as below css 

 

.story-pot-cover{
  animation:  roatePotCover .2s linear infinite alternate;
}

.story-pot-cover-top{
  animation: roatePotCover .2s linear infinite alternate;
}

@keyframes roatePotCover {
  0%{
    transform: translate(4px , -8px) rotate(11deg);
  }    
  40%{
    transform: translate(4px , -6px) rotate(11deg);
  }
  70%{
    transform: translate(3px , 0px) rotate(0deg);
  }
  100%{
    transform: translate(3px , 0px) rotate(0deg);
  }
}

 

 

 

 

See the Pen mqbaPJ by lichunbin814 (@lichunbin814) on CodePen