刷新时 chrome 中的 CSS3 过渡中断答案

【问题标题】：CSS3 transition breaks in chrome on refresh刷新时 chrome 中的 CSS3 过渡中断
【发布时间】：2015-11-22 07:48:55
【问题描述】：

环顾四周，没有发现任何类似的东西 - 发现这真的很奇怪。

我为页面底部的菜单加载了一个简单的动画，加载后几秒钟将文本向上滑动（以允许其他动画完成）。这在 firefox、IE、android 浏览器和 chrome for android 上运行得非常好。但是当我在桌面 Chrome (44) 上测试它时，它并不能正常工作。

当我第一次加载页面（清除缓存/隐身）时，动画将起作用。但是以后每次我加载页面时，它都会中断 - 我不知道为什么。

这仅在我将 div 中的一个跨度包含在链接中时才会发生。

动画是这样的：

@-webkit-keyframes fadeInBottom {
    0% {
       opacity: 0;
       -webkit-transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInBottom {
    0% {
       opacity: 0;
       -moz-transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       -moz-transform: translateY(0);
    }
}

@keyframes fadeInBottom {
    0% {
       opacity: 0;
       transform: translateY(15vw);
    }
    100% {
       opacity: 1;
       transform: translateY(0);
    }
}

跨度的 css：

.basePanel{
    z-index:999;
    height: 5vw;
    width: 100vw;
    position:absolute;
    bottom:0;
    font-size:4vw;
    color:#f1f8f0;
    display:inline-block;
    font-family:coda, courier;
    -webkit-animation-name: fadeInBottom;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-delay:1.8s;
    -moz-animation-name: fadeInBottom;
    -moz-animation-fill-mode: both;
    -moz-animation-duration: 1.3s;
    -moz-animation-delay:1.8s;
    animation-name: fadeInBottom;
    animation-fill-mode: both;
    animation-duration: 1.3s;
    animation-delay:1.8s;

}
#contact{
    padding-top: 15vh;
    position:relative;
    font-family:coda, courier;
    text-align:left;
    color:#f1f8f0;
    font-size:6vw;
}
.button{
    position:relative;
    text-align:center;
    width:32.1vw;
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
}

.button:hover{
    background-color: #252c24;
    -webkit-transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear;
    -o-transition: background-color 0.5s linear;
    -ms-transition: background-color 0.5s linear;
    transition: background-color 0.5s linear;
}

.centre{
    width:32.15vw;
}

和相关的html：

<div class="basePanel">
    <span class="left basePanel button">About</span>
    <span class="centre basePanel button">Portfolio</span>
    <a href="contact">
        <span class="right basePanel button">Contact</span>
    </a>
</div>

这里是相关 HTML 和 CSS 的一个小技巧：https://jsfiddle.net/bqLLqbwc/

令人讨厌的是，这实际上在 Chrome 中有效。要查看损坏的页面，这是我正在处理的实际网页：http://www.devox.org

我在两台计算机上进行了测试，一台运行 Windows 7，另一台运行 ubuntu 14.04，均运行 chrome 44。

【问题讨论】：

标签： html css google-chrome css-animations

【解决方案1】：

所以我最终对 html 进行了一些重构。

虽然感觉将<div> 标记包装在<a> 标记中会更容易，但它似乎在Chrome 中不起作用。也许它打破了 HTML5 之前的一些遗留错误。我不知道。

因此，我将 <a> 标签包装在 <span> 标签中并更改 css 以使其填充 div 并删除任何装饰：

html:

<span class="right basePanel button"><a href="contact">Contact</a></span>

css:

.button a{
    color: #f1f8f0;
    display:block;
    height: 100%;
    width: 100%;
    text-decoration:none;
}

.button a:visited{color:#f1f8f0;}

这似乎工作正常。

【讨论】：