Показывая скрытый элемент с непрозрачностью-анимации

Question

У меня есть #foo элемент скрыт, и мне нужно, чтобы показать его с zoomIn CSS анимации (которые приносят элемент из opacity:0 в opacity:1.

Это код, который я» м с помощью:

CSS

#foo { 
    opacity: 0; 
    ... 
} 

// Zoom In animation 
@keyframes zoomIn { 
    0% { 
    opacity: 0; 
    transform: scale3d(.3, .3, .3); 
    } 
    50% { 
    opacity: 1; 
    } 
} 

.zoomIn { 
    animation: zoomIn .2s ease-in-out 0s both; 
} 

JS

$(document).ready(function() { 
    $("#foo").addClass("zoomIn"); 
});​ 

С приведенным выше кодом я вижу анимацию, а затем элемент #foo снова исчезает. Он не содержит opacity:1. Как это решить?

Answer 1

О Keyframes

В дополнение к посту Slugge, мне было интересно, почему вы закончить анимацию в 50%. Я думаю, вы должны закончить его на 100% (особенно, если вы хотите, чтобы opacity остался на 1). Или вместо 0% {} 100% {}, вы можете использовать from {} to {}.

@keyframes zoomIn { 
    0% { 
    opacity: 0; 
    transform: scale3d(.3, .3, .3); 
    } 
    100% { 
    opacity: 1; 
    } 
} 

Об другого решения

Я думаю, было бы проще просто определить transition и «активный» класс вместо использования ключевых кадров.

#foo { 
    opacity: 0; 
    transition: opacity 0.2s ease-out; 
} 

#foo.active { 
    transform: scale3d(.3, .3, .3); 
    opacity: 1; 
} 

затем

$(document).ready(function() { 
    $("#foo").addClass("active"); 
});​ 

Вы можете добавить переходtransform, а также с transition: opacity 0.2s ease-out, transform 0.2s ease-out; или transition: all 0.2s ease-out;

Good Luck»

Answer 2

Вам нужно определить, что происходит в конце анимации, это можно сделать с помощью свойства «форвардов» анимации-заполнения-режима, для этого требуется, чтобы анимация имела конец (не может заканчиваться на 50%, необходимо конец на 100% или от-до) так изменить:

.zoomIn { 
    animation: zoomIn .2s ease-in-out 0s both; 
} 

к:

.zoomIn { 
    animation: zoomIn .2s ease-in-out 0s forwards; 
} 

используя оба, вы сказать, что элемент должен как использовать вперед и назад, когда вперед это «конец «анимации, а назад -« начало »анимации. Поэтому у вас будет непрозрачность: 0 и непрозрачность: 1, и, по-видимому, обратное значение является более сильным из двух.