Мои свойства анимации не работают одновременно

Question

Я пробую простую анимацию div, которая анимируется при загрузке страницы. Ниже вы можете увидеть GIF анимации.

Вот код

@keyframes newActivity{  
 
    to{   
 
     position: fixed; 
 
     z-index: 100;   
 
     top: 18%; 
 
     left: 10%;   
 
     width:70%; 
 
     height:80%;  
 
    } 
 

 
} 
 
.div:first-child {  
 
    animation-name:newActivity; 
 
    animation-duration:5s; 
 
} 
 

 
div {  
 
    width: 290px; 
 
    height:200px; 
 
    float:left; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06); 
 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06); 
 
    background-color:red; 
 
    border: 1px solid #BCBCBC; 
 
    overflow:hidden; 
 
    z-index:-10; 
 
}

<div class='div'></div>

Вы можете видеть, что первое, что увеличивает ширину и отрегулировать положение и увеличить высоту (без анимации его). Почему это происходит? Я хочу анимировать все эти свойства одновременно.

Answer 1

Это происходит потому, что вы установили высоту to в процентах, но проценты по высоте наследуются; они работают только тогда, когда родительский элемент имеет объявленную высоту.

Только видовой экран имеет встроенную высоту, поэтому, если вы хотите использовать height: 80% на своем div, вам также необходимо установить html, body { height: 100%; } в свой CSS. Элемент html является дочерним элементом окна просмотра, а body является дочерним по отношению к html. Таким образом, ваш div height: 80%; может наследовать весь путь до body и html в окне просмотра. Смотрите этот пример:

html, body { 
 
    height: 100%; 
 
} 
 

 
@keyframes newActivity { 
 
    to { 
 
     position: fixed; 
 
     z-index: 100; 
 
     top: 18%; 
 
     left: 10%; 
 
     width: 70%; 
 
     height: 80%; 
 
    } 
 
} 
 

 
.div:first-child { 
 
    animation-name: newActivity; 
 
    animation-duration: 5s; 
 
} 
 

 
div { 
 
    width: 290px; 
 
    height: 200px; 
 
    float: left; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06); 
 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 5px rgba(0, 0, 0, 0.06); 
 
    background-color: red; 
 
    border: 1px solid #BCBCBC; 
 
    overflow: hidden; 
 
    z-index: -10; 
 
}

<div class="div"></div>

P.S. position не является допустимым свойством анимации. См. Список допустимых свойств here в сети разработчиков Mozilla.

P.P.S. если вы хотите, чтобы анимация сохраняла свое состояние в конце, вы можете использовать animation-fill-mode: forwards;.