我试图让一个标题飞进来,之后当你将它悬停时,它应该摇动(两者都用

 

　　css3动画).它以我想要的方式飞行,也摇晃,但是在我从元素中移除鼠标之后它会回到原始边缘 – 右边(它在飞行动画之前),即使我设置了——-animation-fill-mode：前锋;

 

　　当我查看chromedevtools时,元素永远不会改变其边距(即使动画有效……).我能解决这个问题吗？

 

　　另外,有没有办法防止第一个动画在摇动动画后再次发生？

 

　　飞翔动画：

 

　　#name {

 

　　margin:40px 2% 40px 0;

 

　　-webkit-animation:flyin 1.5s;

 

　　-webkit-animation-fill-mode: forwards;

 

　　-webkit-animation-timing-function: ease-in-out;

 

　　-webkit-animation-delay: 1800ms;

 

　　}

 

　　@-webkit-keyframes flyin {

 

　　from{margin-right: 2%;}

 

　　30% {margin-right: 12%;}

 

　　50% {margin-right: 9%;}

 

　　60% {margin-right: 10%;}

 

　　to {margin-right: 10%;}

 

　　}

 

　　摇动画：

 

　　#name:hover {

 

　　**margin-right: 10%; //i also have to set this?! or it starts at 2%**

 

　　-webkit-animation:shake 0.7s;

 

　　-webkit-animation-fill-mode: forwards;

 

　　-webkit-transform-origin:50% 50%;

 

　　-webkit-animation-iteration-count: infinite;

 

　　-webkit-animation-timing-function: linear;

 

　　}

 

　　@-webkit-keyframes shake {

 

　　0% { -webkit-transform: translate(2px,1px) rotate(0deg); }

 

　　10% { -webkit-transform: translate(-1px,-2px) rotate(-1deg); }

 

　　20% { -webkit-transform: translate(-3px,0px) rotate(1deg); }

 

　　30% { -webkit-transform: translate(0px,2px) rotate(0deg); }

 

　　40% { -webkit-transform: translate(1px,-1px) rotate(1deg); }

 

　　50% { -webkit-transform: translate(-1px,2px) rotate(-1deg); }

 

　　60% { -webkit-transform: translate(-3px,1px) rotate(0deg); }

 

　　70% { -webkit-transform: translate(2px,1px) rotate(-1deg); }

 

　　80% { -webkit-transform: translate(-1px,-1px) rotate(1deg); }

 

　　90% { -webkit-transform: translate(2px,2px) rotate(0deg); }

 

　　100% { -webkit-transform: translate(2px,1px) rotate(0deg); }

 

　　}