Как при анимации объекта на ховер с помощью CSS зафиксировать верхний край а нижний что-бы качался?

Question

[Pavel]

Вот пример кода codeopen

Answer 1

[Александр Степанов]

Так раздели блок на два, в чем проблема)?

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;
	}

Comments

[Pavel]

не до конца понимаю) походу надо изучить анимацию, а не можно показать на примере кодом?

[Pavel]

нет, я имею ввиду вот если представить как качается лист держась на ветке, в одной точке фиксирован и другой раскачивается

[Александр Степанов]

Pavel: аааа) я неправильно понял, значит да. transform-origin)

[Pavel]

ок, спасибо за подсказку