<> 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,
ELementUI select Multi select drop-down box to get all properties of the selected item mysql Modify primary key 【Python】 read txt file , Gets the specified location data in the specified row TypeScript Data types in is enough mysql Recursively finds all child nodes of the parent class Online troubleshooting HTTP Status code ——415 and 406el-select At the same time label and value value Vue Development tips 【JAVA】【 Huawei campus recruitment written examination - Software 】2020-09-09ajax get Request Chinese parameter garbled solution