基于CSS3的animation属性实现微信拍一拍动画效果CSS3动画之利用requestAnimationFrame触发重新播放功能css动画属性使用及实例代码(transition/transform/animation) CSS3中动画属性transform、transition和animation属性的区别css动画效果之animation的常用样式

 @-webkit-keyframes shake { 0% { -webkit-transform: translate(2px, 2px); } 25% { -webkit-transform: translate(-2px, -2px); } 50% { -webkit-transform: translate(0px, 0px); } 75% { -webkit-transform: translate(2px, -2px); } 100% { -webkit-transform: translate(-2px, 2px); } } @keyframes shake { 0% { transform: translate(2px, 2px); } 25% { transform: translate(-2px, -2px); } 50% { transform: translate(0px, 0px); } 75% { transform: translate(2px, -2px); } 100% { transform: translate(-2px, 2px); } } .shake { position: relative; top: 30px; left: 100px; height: 200px; width: 200px; color: #ff0000; background: #000; } .shake:hover { -webkit-animation: shake 0.2s infinite; animation: shake 0.2s infinite; } /*活动摇摆动画*/ @-webkit-keyframes swing { 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } @-moz-keyframes swing { 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } @-o-keyframes swing { 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } @keyframes swing { 10% { transform: rotate(12deg); } 20% { transform: rotate(-11.5deg); } 30% { transform: rotate(1deg); } 40% { transform: rotate(-1deg); } 50%,100% { transform: rotate(0.5deg); } } .stagger { background-color: #ff0000; width: 60px; height: 60px; } .stagger1{ animation: swing .5s .15s linear 1; /* animation-play-state: paused; */ } 
qq窗口抖动
微信拍拍头像晃动

 document.querySelector('.stagger').addEventListener('click', function() { document.querySelector('.stagger').classList.add('stagger1') console.log('papa nudged baby') }) /*每次点击实现动画，注意监听动画结束，移除动画类，后再添加动画类 document.querySelector('.stagger').addEventListener('animationend', function() { document.querySelector('.stagger').classList.remove('stagger1') })