.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } @-webkit-keyframes bounce { 0%,100%,20%,53%,80% { -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1); transition-timing-function: cubic-bezier(0.215,.61,.355,1); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } @keyframes bounce { 0%,100%,20%,53%,80% { -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1); transition-timing-function: cubic-bezier(0.215,.61,.355,1); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom }
示例代码: <div class="animated flash">测试</div> ;flash 可以用其它动作名称代替