CSS3 animation No effect

Question

Using CSS3, HTML5, ASP.NET MVC4 C#. MS Visual Studio.

I have the following CSS...

.animated{-webkit-animation-fill-mode:both;
      -moz-animation-fill-mode:both;
      -ms-animation-fill-mode:both;
      animation-fill-mode:both;
      -webkit-animation-duration:1s;
      -moz-animation-duration:1s;
      -ms-animation-duration:1s;
      -o-animation-duration:1s;
      animation-duration:1s;}
@-webkit-keyframes bounceInRight {
0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
}   60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
}

80% {
    -webkit-transform: translateX(10px);
}

100% {
    -webkit-transform: translateX(0);
}
}

@-moz-keyframes bounceInRight {
0% {
    opacity: 0;
    -moz-transform: translateX(2000px);
}

60% {
    opacity: 1;
    -moz-transform: translateX(-30px);
}

80% {
    -moz-transform: translateX(10px);
}

100% {
    -moz-transform: translateX(0);
}
}

@keyframes bounceInRight {
0% {
    opacity: 0;
    transform: translateX(2000px);
}

60% {
    opacity: 1;
    transform: translateX(-30px);
}

80% {
    transform: translateX(10px);
}

100% {
    transform: translateX(0);
}
}

img.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
animation-name: bounceInRight;
}    

The Razor View snippet is...

<div class="row rowpadding">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
            @Html.Action("BlogTags", "Blog")
            @Html.Action("BlogMonths", "Blog")  
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            <div class="row rowpadding">
                @foreach (var item in Model.BlogPosts)
                {
                    if(isFirst)
                    {
                        isFirst = false;
                    } else
                    {
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 news-cata-div-size">
                        <div><img class="bounceInRight" src="~/Themes/Renray/Content/images/small-1.png" /></div>
                        <div><span class="News-item-Date">@item.CreatedOn.ToString("D")</span></div>
                        <div><a class="News-item-title" href="@Url.RouteUrl("BlogPost", new { SeName = item.SeName })">@item.Title</a></div>
                        <div class="post-body">
                           @Html.Raw((item.Body.Length > 200 ? item.Body.Substring(0,200) : item.Body))
                           <a href="@Url.RouteUrl("BlogPost", new { SeName = item.SeName })">
                               ...Read More?
                           </a>
                        </div>
                    </div>
                    }
                }

            </div>
        </div>
    </div>

The reason why the view snippet i provided is large is because i want you guys to see the whole thing, as you may notice this is a responsive build using bootstrap.

As for the problem, the animation is supposed to bounce from the right every iteration of an image (view code is still incomplete for dynamic images, but that isn't relevant).

What happens on load is nothing, no animation effect at all. I'm wondering if you guys could point out what I'm doing wrong.

Many thanks!

Answer 1

The problem appears to be that your animation fill mode and duration are applied to an .animated class which isn't applied to any element within your Razor view.

To fix this, simply add this class to your img element:

<img class="animated bounceInRight"
     src="~/Themes/Renray/Content/images/small-1.png" />

Alternatively, merge your .animated and bounceInRight classes:

img.bounceInRight {
    -webkit-animation-fill-mode:both;
    moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-name: bounceInRight;
    -moz-animation-name: bounceInRight;
    animation-name: bounceInRight;
}