使用CSS3,HTML5,ASP.NET MVC4 C#。女士。
我有以下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;
} Razor View片段是..。
<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>我提供的视图片段之所以很大,是因为我希望大家看到整个过程,因为您可能会注意到,这是一个使用引导响应的构建。
至于这个问题,动画应该在图像的每一次迭代中从正确的反弹(动态图像的视图代码仍然不完整,但这与此无关)。
在加载时所发生的事情是没有的,根本没有动画效果。我想知道你们能不能指出我做错了什么。
非常感谢!
发布于 2013-11-07 15:58:56
问题似乎是,您的动画填充模式和持续时间应用于.animated类,该类不应用于Razor视图中的任何元素。
要解决这个问题,只需将这个类添加到您的img元素:
<img class="animated bounceInRight"
src="~/Themes/Renray/Content/images/small-1.png" />或者,合并.animated和bounceInRight类:
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;
} https://stackoverflow.com/questions/19840210
复制相似问题