Так раздели блок на два, в чем проблема)?
HTML:<div class="wrap">
<div class="img"></div>
<div class="img animate"></div>
</div>
CSS:@-webkit-keyframes swing
{
15%
{
-webkit-transform: translate3d(5px, 0, 5px);
transform: translate3d(5px, 0, 5px);
}
30%
{
-webkit-transform: translate3d(-5px, 0, -5px);
transform: translate3d(-5px, 0, -5px);
}
50%
{
-webkit-transform: translate3d(3px, 00 3px);
transform: translate3d(3px, 0, 3px);
}
65%
{
-webkit-transform: translate3d(-3px, 0, -3px);
transform: translate3d(-3px, 0, -3px);
}
80%
{
-webkit-transform: translate3d(2px, 0, 2px);
transform: translate3d(2px, 0, 2px);
}
100%
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes swing
{
15%
{
-webkit-transform: translate3d(5px, 0, 5px);
transform: translate3d(5px, 0, 5px);
}
30%
{
-webkit-transform: translate3d(-5px, 0, -5px);
transform: translate3d(-5px, 0, -5px);
}
50%
{
-webkit-transform: translate3d(3px, 00 3px);
transform: translate3d(3px, 0, 3px);
}
65%
{
-webkit-transform: translate3d(-3px, 0, -3px);
transform: translate3d(-3px, 0, -3px);
}
80%
{
-webkit-transform: translate3d(2px, 0, 2px);
transform: translate3d(2px, 0, 2px);
}
100%
{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.wrap{
position: relative;
background-color: silver;
height: 500px;
margin: 0 auto 1em;
-webkit-perspective: 50px;
perspective: 50px;
}
.img{
position: absolute;
top: 20%;
left: 40%;
transition: all .1s ease;
cursor: pointer;
height: 100px;
width: 150px;
background-color: gray;
}
.img.animate {
top:40%;
}
.wrap:hover .animate{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
