how to rotate like css trasform

[lichunbin814]

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

[mikel]

Hi @lichunbin814,

 

Welcome to GreenSock Forums.

 

Please look at these tips: https://greensock.com/svg-tips

Special: transformOrigin.

 

Here is only an approximate direction:

 

See the Pen XzrOzb by mikeK (@mikeK) on CodePen

 

Happy tweening ...

 

Best regards

Mikel

[lichunbin814]

thanks your help~