Выполнить анимацию из текущей позиции элемента на 10px справа

Я новичок в этой теме анимации. По сути, я хочу переместить div .son в вашу hover собственность. Я бы хотел, чтобы эта анимация начиналась с current position в 10px на right. Обычно я могу выполнить эту анимацию, определив начальную позицию для «слева» и окончание для «слева», но в этом случае я хочу, чтобы она заняла начальную позицию, в которой она находится, и, таким образом, переместилась на 10 пикселей вправо.

<div class = "father">
  <div class = "son">
  </div>
</div>

.father{
  position:relative;
  width:300px;
  height:300px;
  border:1px solid red;
}

.son{
  position:absolute;
  width:100px;
  height:100px;
  border:1px solid red;

}

.son:hover {
    -webkit-transition: all 0.5s ease;
    -webkit-animation: fadein_1 0.2s ease-in;
}

@-webkit-keyframes fadein_1 {
    from { opacity: 1;left:auto;z-index:2;  }
    to { opacity: 0; left:10px;z-index:3; }
}

это мой код:

https://jsfiddle.net/ze9vdLa3/it?

Спасибо

Ваша демонстрация не существует, и вы должны использовать transform: translateX и не оставлять ее лучше для производительности.

— 14.03.2019 17:12

@JoeKoker звучит интересно. можете ли вы опубликовать свой ответ, пожалуйста? Я до сих пор не понимаю, как определить начальную позицию.

— 14.03.2019 17:24

@JoeKoker от:??? to: перевестиX...

— 14.03.2019 17:27

css

14.03.2019 16:58

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 3

Если вы можете использовать jQuery, проверьте это: https://jsfiddle.net/95agyjuo/

jQuery('.son').mouseover(function(){
  jQuery(this).animate({ 
    left : "+=10"
  })
})

14.03.2019 17:19

Вы можете выполнить желаемую анимацию, используя функцию CSS перевестиX(). Как заявил @Joe Koker, это более эффективно, чем анимация свойства left.

@-webkit-keyframes fadein_1 {
    from { 
        opacity: 1;
        transform: translateX(0px); //start from initial position
        z-index:2;
    }
    to { 
        opacity: 0;
        transform: translateX(10px); //move 10px
        z-index:3;
    }
}

это работает.. но.. почему анимация не выглядит плавной?

— 14.03.2019 17:34

Прерывистая анимация может быть вызвана рядом факторов, и, не глядя на всю вашу кодовую базу, я не могу диагностировать конкретную проблему. Вы можете попробовать добавить transform: translateZ(0); к блокам from и to, что не будет анимировать ничего, но запустит рендеринг с ускорением графического процессора, а мая даст вам более плавный FPS. Подробнее об этом здесь: smashingmagazine.com/2016/12/gpu-animation-делать-это-правильно. Однако, чтобы правильно устранить неполадки, откройте вкладку «Производительность» в инструментах разработки вашего браузера и посмотрите, что вызывает замедление.

— 14.03.2019 17:52

14.03.2019 17:27

Ваш вопрос немного расплывчатый, но если вы хотите анимировать элемент справа, это легко. У тебя почти получилось.

Некоторые вещи:

Невозможно анимировать из auto, поэтому мне пришлось изменить left:auto -> left: 0; (from { opacity: 1;left:0;z-index:2; })
-webkit- не нужно
Также невозможно анимировать z-index

Вот рабочая рабочий пример: https://jsfiddle.net/oqdn6xLg/1/

Хотя для этого варианта использования я бы рекомендовал вместо этого использовать свойство transition, так как оно проще. Оцените разницу здесь: https://jsfiddle.net/L04xhgpr/

Обратите внимание, что transform: translateX() работает лучше, как уже говорили другие :)

14.03.2019 17:40