在为一个元素设置初始可见性和动画可见性之间是否存在冲突?

编辑:更正了ARLCode在下面指出的CSS中的一个错别字-不相关仅使用CSS，我正在尝试动画一些文本，使不同的文本块开始隐藏，在计时器上变得可见，然后在计时器上逐渐消失，按顺序。

首先，我从使用p {visibility: hidden}隐藏的所有文本开始，并添加一个动画来改变n秒后的可见性值。

此外，我将<p>嵌套在<div>中，并添加了一个动画，通过动画不透明度来淡化<div>。这应该在(n+x)秒后使刚刚出现的文本淡出。

淡出是没有问题的，但弹出从来不工作。当我尝试动画可见性时，无论如何，页面加载时总是显示所选文本，尽管它之前设置为隐藏。因此，它不会弹出。它已经在纸上了。下面是代码和codepen的链接。

我走错轨道了吗?

<p id="one">this is visible on page load and then fades</p>
<div id="two-container"> <!---this div is for fading the text--->
  <p id="two">this should START hidden, then appear AFTER p one fades</p>
</div>

CSS

/*************************************** GENERAL ***************************************/ p { visibility: hidden; } /*************************************** TEXT ANIMATION SEQUENCE ***************************************/ #one { visibility: visible; -webkit-animation-name: fade-out; animation-name: fade-out; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #two { -webkit-animation-name: pop-in; animation-name: pop-in; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #two-container { -webkit-animation-name: fade-out; animation-name: fade-out; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } /*************************************** ANIMATION KEYFRAMES ***************************************/ @-webkit-keyframes fade-out { 0%, 50% {opacity: 1; } 100% {opacity: 0; } } @-webkit-keyframes pop-in { 0% {visibility: hidden; } 100% {visibility: visible; } }
代码笔演示

你可以在预览中看到，页面加载# 2为可见的，尽管p {visibility:hidden;}在一般部分。移除弹出动画修复了这个问题。#two-container的淡出动画效果很好。我错过了什么?
澄清一点:我不期望-正如这里的许多其他人一样-可见性作为淡出动画。我希望所需的文本突然出现，然后逐渐褪色-因此第二个动画选择<div>。可见性的二元性很好。

好的，我想这就是你想要的效果。
CSS

#one { visibility: visible; -webkit-animation-name: fade-out; animation-name: fade-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #two { visibility: hidden; -webkit-animation: pop-in 2s; -webkit-animation-delay: 4s; -moz-animation: pop-in 2s; -ms-animation: pop-in 2s; -o-animation: pop-in 2s; animation: pop-in 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes fade-out { from {opacity: 1; } to {opacity: 0; } } @-webkit-keyframes pop-in { 0% { visibility: visible; opacity: 0; -webkit-transform: scale(0.5); } 100% { visibility: visible; opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes pop-in { 0% { visibility: visible; opacity: 0; -moz-transform: scale(0.5); } 100% { opacity: 1; -moz-transform: scale(1); } } @keyframes pop-in { 0% { visibility: visible; opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
<
Codepen演示/strong>

问题是你把-webkit-作为--webkit-，我固定了下面的CSS。
CSS

#one { visibility: visible; -webkit-animation-name: fade-out; animation-name: fade-out; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #two { -webkit-animation-name: pop-in; animation-name: pop-in; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } #two-container { -webkit-animation-name: fade-out; animation-name: fade-out; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes fade-out { 0%, 50% {opacity: 1; } 100% {opacity: 0; } }
代码笔演示

相关内容

最新更新

热门标签：