首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS3动画无效果

CSS3动画无效果
EN

Stack Overflow用户
提问于 2013-11-07 15:44:33
回答 1查看 1.2K关注 0票数 1

使用CSS3,HTML5,ASP.NET MVC4 C#。女士。

我有以下CSS..。

代码语言:javascript
运行
复制
.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片段是..。

代码语言:javascript
运行
复制
<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>

我提供的视图片段之所以很大,是因为我希望大家看到整个过程,因为您可能会注意到,这是一个使用引导响应的构建。

至于这个问题,动画应该在图像的每一次迭代中从正确的反弹(动态图像的视图代码仍然不完整,但这与此无关)。

在加载时所发生的事情是没有的,根本没有动画效果。我想知道你们能不能指出我做错了什么。

非常感谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-11-07 15:58:56

问题似乎是,您的动画填充模式和持续时间应用于.animated类,该类不应用于Razor视图中的任何元素。

要解决这个问题,只需将这个类添加到您的img元素:

代码语言:javascript
运行
复制
<img class="animated bounceInRight"
     src="~/Themes/Renray/Content/images/small-1.png" />

或者,合并.animatedbounceInRight类:

代码语言:javascript
运行
复制
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;
}  
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19840210

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档