SOURCE

<div class="popcorn popcorn_hover"></div>
<div class="atomizer atomizer_hover"></div>

*{ margin:0; padding:0}
body{ background:#000}
.popcorn {
width: 232px;
height: 159px;
background: url(https://img5.99.com/mykd/img/2018/07/05/item1.png) no-repeat;
z-index: 1;
transform: translateX(-800px);
transition: all .8s ease-in 2.7s;
}
.popcorn_hover {
transform: translateX(0);
animation: boom 3s ease-out .6s infinite normal;
}
@keyframes boom {
0% {
transform:scale(1) translate(0, 0)
}
3% {
transform:scale(0.9) translate(-5px, 0)
}
8% {
transform:scale(1) translate(10px, 0)
}
25% {
transform:scale(1) translate(0, 0)
}
100% {
transform:scale(1) translate(0, 0)
}
}

.atomizer {
width: 155px;
height: 80px;
background: url(https://img5.99.com/mykd/img/2018/07/05/item2.png) no-repeat;
z-index: 1;
opacity: 0;
transition: all .3s linear 5s;
animation: xs 3s ease-out .9s infinite normal;
transform-origin: 0 40px
}
.atomizer_hover {
opacity: 1
}

@keyframes xs {
0% {
transform:scale(0.5) translate(-250px, 30px);
opacity:0
}
10% {
transform:scale(1) translate(50px, 0);
opacity:1
}
30% {
transform:scale(1) translate(100px, 0);
opacity:1
}
50% {
transform:scale(1) translate(100px, 0);
opacity:0
}
100% {
transform:scale(1) translate(100px, 0);
opacity:0
}
}