我正在尝试在没有Javascript 的情况下实现一些动画onLoad 。 JS很简单,CSS就是......不是。
我有一个div
,display: none;
应该在display: block;
,并且在3个secondes之后应该是display
。很多资源告诉我动画不适用于visibility
,但应该使用<script type="text/javascript">
$(document).ready(function(){
$(".js_only").hide();
setTimeout(function () {
$(".js_only").show();
}, 3000);
});
</script>
(我在转换中经常使用)。
知道我有这个糟糕的javascript功能:
display: none;
我在CSS中尝试了一些动画,但没有结果......似乎没有任何效果。
我的页面中没有动画,但只是在动画上遇到@-moz-keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
@-webkit-keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
@keyframes showEffect {
0% { display: none; visibility: hidden; }
100% { display: block; visibility: block; }
}
.css_only {
-moz-animation-name: showEffect;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 2.3s;
-webkit-animation-name: showEffect;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 2.3s;
animation-name: showEffect;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2.3s;
}
。
13.0.2000.0
重要的是隐藏,这个元素根本不占用空间。 I created a JSFiddle进行相当多的测试。
我的主要关注点是SEO ...我不认为JS选项真的很好,这就是为什么我想要一个纯CSS替代品。也有兴趣测试这些动画,看看这些限制在哪里(我现在看到一个?)。有点喜欢这样的挑战。
感谢阅读,希望有人有答案。
答案 0 :(得分:26)
你认为display
不可动画是正确的。它不会起作用,你不应该在关键帧动画中加入它。
visibility
在技术上是可动画的,但是在一个方向上。您需要根据需要保留属性,然后捕捉到新值。 visibility
不会在关键帧之间进行,它只会严厉执行。
.ele {
width: 60px;
height: 60px;
background-color: #ff6699;
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
.ele:hover {
background-color: #123;
}
@keyframes fadeIn {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
&#13;
<div class="ele"></div>
&#13;
如果您想淡出,请使用opacity
。如果您包含延迟,则您还需要visibility
,以阻止用户在元素不可见时与其进行互动。
.ele {
width: 60px;
height: 60px;
background-color: #ff6699;
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
.ele:hover {
background-color: #123;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
&#13;
<div class="ele"></div>
&#13;
两个示例都使用animation-fill-mode
,它可以在动画结束后保存元素的可视状态。
答案 1 :(得分:5)
您可以使用animation的delay
道具,只需在延迟后设置visibility:visible
,演示:
@keyframes delayedShow {
to {
visibility: visible;
}
}
.delayedShow{
visibility: hidden;
animation: 0s linear 2.3s forwards delayedShow ;
}
&#13;
So, Where are you?
<div class="delayedShow">
Hey, I'm here!
</div>
&#13;
答案 2 :(得分:3)
使用 animation-delay
:
div {
width: 100px;
height: 100px;
background: red;
opacity: 0;
animation: fadeIn 3s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
答案 3 :(得分:2)
答案 4 :(得分:1)
很遗憾,您无法为display
属性设置动画。有关动画内容的完整列表,请参阅w3 Schools的CSS animation list。
如果你想在页面上保留它的视觉位置,你应该尝试动画它的height
(它仍然会影响其他元素的位置),或{{1 (它是多么透明)。您甚至可以尝试动画opacity
,即z轴(深度)上的位置,方法是在其顶部放置一个元素,然后重新排列顶部的内容。但是,我建议使用z-index
,因为它会保留元素所在的垂直空间。
我已更新fiddle以显示示例。
祝你好运!