how to change element CSS position with animation

Question

I want to change an HTML element position from static to fixed at top 50% and left 50% of the browser window but the code just leads to background-color change!

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

Solution 1

I found the answer via 'Vangel Tzo' help :

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

Solution 2

Short answer: You can't animate position.

Instead of applying position: fixed through keyframes try to add a class fixed or something via javascript.

An example: https://jsfiddle.net/6Ldqhoce/

Alternative you could move the element with transform: translate but it won't be fixed.

Solution 3

You cannot change position using CSS-animation because position is NOT an animatable property.

List of animatable properties.

However, this fiddle might help you.

Comments

[Mohmmad Ebrahimi Aval]

how set {transform: translate} by percentage for browser dimention ?

[Mohmmad Ebrahimi Aval]

i khow how to do it with jQuery but i want use CSS.

[Vangel Tzo]

I haven't really tried to use it before with browser dimension but I suppose this might work transform: translate(50vw, 50vh)

[wikijames]

Then, I can only say, currently we don't have option to do it with css.

[skyboyer]

...and once element is where we want we can change position even without animation so nobody mentioned that!

[Shrinivas Shukla]

@GeorgicaFaraFrica The fiddle is working for me. It doesn't animate the position but it adds a class using Javascript which has different position. You can see the difference by commenting tagline.classList.add('show'); and running it again