html5怎么實現動畫播放狀態

今天小編給大家分享一下html5怎么實現動畫播放狀態的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　飛翔動畫：

　　#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); }

　　}

以上就是“html5怎么實現動畫播放狀態”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。