如何基于CSS3的animation属性实现微信拍一拍动画效果

小编给大家分享一下如何基于CSS3的animation属性实现微信拍一拍动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

看到最近流行的微信拍一拍功能，复习下CSS3的animation,所以写下这个盒子晃动的动画，把qq的窗口抖动也加上吧

@-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;  } <!-- qq窗口抖动 -->  <div class="shake">qq窗口抖动</div>  <!-- 微信拍拍头像晃动 -->  <div class="stagger">微信拍拍头像晃动</div>

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')    })

以上是“如何基于CSS3的animation属性实现微信拍一拍动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！