Как изменить позицию элемента CSS с анимацией

Question

Я хочу изменить позицию элемента HTML из статического в фиксированное на 50% и оставить 50% окна браузера, но код просто приводит к изменению цвета фона!

div { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: static; 
    top: auto; 
    left: auto; 
    animation-name: example; 
    animation-duration: 4s; 
} 

@keyframes example { 
    from { 
     background-color: red; 
     position: static; 
     top: auto; 
     left: auto; 
    } 
    to { 
     background-color: yellow; 
     position: fixed; 
     top: 50%; 
     left: 50%; 
    } 
} 

Answer 1

я нашел ответ через помощь 'Vangel TZO':

div { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    animation-name: example; 
    animation-duration: 4s; 
} 

@keyframes example { 
    from { 
     background-color: red; 
    } 
    to { 
     background-color: yellow; 
     transform: translate(50vw, 50vh); 
    } 
} 

Answer 2

Короткий ответ: You can't animate position.

Вместо применения position: fixed через ключевые кадры попытаться добавить класс fixed или что-то с помощью JavaScript.

Пример: https://jsfiddle.net/6Ldqhoce/

Alternative можно переместить элемент с transform: translate, но это не будет исправлено.

Answer 3

Вы не изменение position можете с помощью CSS-animationposition, потому что это НЕанимируемого свойства.

List of animatable properties.

Однако this скрипка может вам помочь.

Answer 4

Вы не можете изменить значение позиции css с помощью анимации css.

Вы можете сделать это с помощью JQuery

примера с парением, вы можете сделать по вашему выбору.

Jquery

С использованием "Css"

$(".div_name").hover(function(){ 
    $(this).css("position", "static"); 
    }, function(){ 
    $(this).css("position", "fixed"); 
}); 

С использованием "Animate"

$(".div_name").hover(function(){ 
     $(this).animate({"position":"static"}, 1000); 
     }, function(){ 
     $(this).animate({"position":"fixed"}, 1000); 
    });