Why is my @-webkit-keyframes fade in animation not working when loading page?

Question

I am creating a personal portfolio and am attempting to add a CSS animation to fade in an image. For some reason, I am unable to figure out why my animation is not showing up in my site when I load it. I am using Bootstrap to style my page. Not sure if this is relevant, but I am also testing my webpage by opening the HTML file from my local machine into my browser. I am using Safari on a MacBook Pro.

Here is the CSS in my stylesheet:

@-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:

<div class="col-5">
    <img src="path to my image" class="rounded-circle">
</div>

I was expecting my image to fade in as I loaded the page, but it just appears when I load or reload the page. Am I missing a property in my CSS? I know that since I am using Safari, I am supposed to use the proper @-webkit prefix, however this has not corrected the issue for me.

As you can probably tell, I am a beginner to CSS animations. Any tips would be greatly appreciated. Thank you!

Answer 1

Solution:

You have a typo in your code:

-webkit-ani**mm**ation:

Remove the redundant m.

Bonus:

Take a look at this thread for learning purposes: How to get @keyframes animation in Safari to work like in Chrome/FF?