为什么 CSS3 动画在我的 ASP.net 网站中不起作用答案

【问题标题】：Why does CSS3 animation not work in my ASP.net website为什么 CSS3 动画在我的 ASP.net 网站中不起作用
【发布时间】：2015-08-09 18:29:11
【问题描述】：

我有一个 ASP.net 网站，其中有以下内容...

HTML：

<div style="width: 99%; margin: 0; padding: 0; text-align: left; overflow: hidden;">
            <div id="sample3" lang="is" class="sample3">

    <figure>
        <img src="../theImages/imgPra.png" width="160" height="160" alt="Specialty Profile" />
        <figcaption>Specialty Profile</figcaption>
    </figure>

<!--end sample3--></div>
        </div>

CSS：

.sample3 figure {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: url('../theImages/preview4.jpg') fixed no-repeat;
}

.sample3 figcaption {
        position: absolute;
    display: block;
    width: 350px;
    height: 50px;
    left: 110px;
    bottom: -110px;
    text-align: center;
    color: #fff;
    background-color: rgba(26,54,59,0.8);
    border: 3px solid rgba(62,116,126,0.6);
    line-height: 50px;
    -moz-box-shadow: rgba(0,0,0,.5) 0 2px 8px;
    -webkit-box-shadow: rgba(0,0,0,.5) 0 2px 8px;
    box-shadow: rgba(0,0,0,.5) 0 2px 8px;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
    -moz-transition: bottom .5s ease-out, left .5s ease-out;
    -webkit-transition: bottom .5s ease-out, left .5s ease-out;
    -o-transition: bottom .5s ease-out, left .5s ease-out;
    transition: bottom .5s ease-out, left .5s ease-out;
}

.sample3 figure:hover figcaption {
    left: -20px;
    bottom: 20px;
}

JSFiddle：http://jsfiddle.net/vas1watw/

它在普通网页中运行良好，但是当我将它添加到我的 .net 网站时，显示的功能区没有动画。

我该如何解决这个问题。

调试模式：

【问题讨论】：

你用什么浏览器测试？ CSS 是一种客户端技术，因此服务器技术的相关性较低。
IE10... 我运行了标准 HTML 页面，它运行良好：/ 当我检查调试模式时，class 的转换代码不存在。
我确定您已经检查过了，但是... CSS 文件是否被缓存？您正在使用的任何选择器或属性是否被页面上的任何其他文件以某种方式覆盖？
有趣的是，sample3 类甚至没有在调试模式下显示。

标签： html asp.net css

【解决方案1】：

您是否在使用站点管理员。如果您使用它，请将 css 放在站点管理员上

【讨论】：

我在内容页面以及站点管理员样式页面中添加了代码，所有内容页面都继承了相同的问题。
它在asp.net网站上完美运行，我只使用你的代码。你能上传sitemater页面代码和子页面代码
请在mastersite的head标签中添加css
css 代码只有在它们是内联的并且悬停不能是内联 css 时才有效：/
为什么 IE 无论如何都不会加载样式中的类？诡异的。我在 Chrome 中尝试了相同的页面，它工作正常 :)

【解决方案2】：

查看@Page 指令的ClientIDMode 属性。 ASP.NET 倾向于自动调整客户端生成的 id，这会导致您的 CSS 指定句柄 #sample3 选择器，因为此 Id 不会存在于 HTML 中，除非该属性设置为 Static。阅读有关ClientIDMode on MSDN 的更多信息。

【讨论】：

我知道所以我添加了一个同名的类，但它仍然无法工作：/
请更新您的问题，以便我们查看新的class 是否有问题。
我更新了调试模式的屏幕截图。由于某种原因，IE 甚至没有看到课程。
你的 CSS 在哪里？在pageStyle.css 内还是在Maintenance.aspx 中的style 标记内？
我把两个都放了只是为了看看它是否有效。在 chrome 中，相同的页面可以工作，但在 IE 中，样式甚至不会加载。我已经清除了 3 次缓存。 IE总是有问题。叹息

【解决方案3】：

所有代码 (HTML/CSS) 均已正确放置在我的网站中。 IE 只花了一整天的时间来刷新页面。我不得不重置强制刷新的 IIS 站点，然后它就可以工作了。

【讨论】：