Во время анимирования элемента - тень движется вместе с изображением . Необходимо что-бы тень оставалась в одном положении .
<html>
<div class="mbi-inner1">
<div class="gear" id="gear1"></div>
<div class="gear" id="gear2"></div>
</div>
</html>
<style>
@keyframes a-name1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes a-name2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.gear {
text-align: center;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-delay: 0;
animation-play-state: paused;
animation-fill-mode: forwards;
}
#gear1 {
background-image: url(/img/gears2.png);
background-size: 250px;
height: 250px;
width: 250px;
animation-name: a-name1;
animation-duration: 30s;
filter: drop-shadow(-10px 0px 2px rgba(0, 0, 0, 0.5));
}
#gear2 {
position: absolute;
top: -7px;
right: -118px;
background-image: url(/img/gears3.png);
background-size: 180px;
height: 180px;
width: 180px;
animation-name: a-name2;
animation-duration: 30s;
filter: drop-shadow(-8px 0px 1px rgba(0, 0, 0, 0.5));
z-index: -1;
}
.mbi-inner1:hover .gear {
animation-play-state: running;
cursor: pointer;
}
</style>
