<> Wechat takes an animation

See the latest popular wechat take one shot function , Review CSS3 Of animation, So write down the animation of the box shaking , hold qq Plus the window jitter
@-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; } /* Active swing animation */ @-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 Window jitter --> <div class=
"shake">qq Window jitter </div> <!-- Wechat patting head shaking --> <div class="stagger"> Wechat patting head shaking </div>
document.querySelector('.stagger').addEventListener('click', function() {
document.querySelector('.stagger').classList.add('stagger1') console.log('papa
nudged baby') }) /* Animation per click , Watch the end of the listening animation , Remove animation class , Add animation class later
document.querySelector('.stagger').addEventListener('animationend', function()
{ document.querySelector('.stagger').classList.remove('stagger1') })

Technology
©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )