Board Thread:Support Requests - Designing Your Wikia/@comment-25154254-20150705154551

Eh, this may not be related to the Wiki, but this is my first practice for my project.

I have made an animation of a character of a game by using couple of pictures, then animating each of them so that he/she will look similar to the game (I usually do the idle animation).

There's a problem with my animation. Sometimes, when I try to make two transforms at once in a keyframe, my result is that the animation "stuns" a while. I tried to fix it in various ways, but it seems that this still happens.

This is my CSS to make animation of the eye of a character (put it in your wikia.css page to test it): .HurrikaleAnimationLeftEye { background: url(http://img2.wikia.nocookie.net/__cb20150704062340/plantsvszombies/images/4/4d/HurrikaleLeftEye.png) no-repeat; width:8px; height:13px; animation-name: HurrikaleLeftEye; animation-duration:4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

@keyframes HurrikaleLeftEye { 0% {} 25% {transform: translate(0px,-2px)} 50% {transform: translate(3px, 2px) rotate(15deg)} 75% {transform: translate(0px,-2px)} 100% {} And here is the code I want to put in page:

When you finish these, you will see that the eye is "stunned" in a few seconds after it moves to above and before it uses another animation. I don't want this to happen, so do you find a solution to fix it, or simply can fix it? I would greatly appericate to anyone helping me.

If you wonder, you can go to here to see my full project. 