Почему мои @-webkit-keyframes исчезают в анимации при загрузке страницы? ⇐ CSS

[Anonymous]

Я создаю личное портфолио и пытаюсь добавить CSS-анимацию для плавного исчезновения изображения. По какой-то причине я не могу понять, почему моя анимация не отображается на моем сайте при ее загрузке. Я использую Bootstrap для оформления своей страницы. Не уверен, что это актуально, но я также тестирую свою веб-страницу, открывая HTML-файл со своего локального компьютера в браузере. Я использую Safari на MacBook Pro.
Вот CSS в моей таблице стилей:

Код: Выделить всё

@-webkit-keyframes fade-image {
0% { opacity: 0; }
100% { opacity: 1; }
}

img {
vertical-align: middle;
border-style: none;
border-radius: 50%;
-webkit-animmation: fade-image 3s;
}

HTML:

Код: Выделить всё

[img]path to my image[/img]

Я ожидал, что мое изображение исчезнет при загрузке страницы, но оно появляется только тогда, когда я загружаю или перезагружаю страницу. Мне не хватает свойства в моем CSS? Я знаю, что, поскольку я использую Safari, мне положено использовать правильный префикс @-webkit, однако это не решило для меня проблему.
Как вы, наверное, догадались, я новичок в CSS-анимации. Любые советы будут очень признательны. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/785 ... ading-page