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

Question

编辑：更正了下面ARLCode注意到的CSS中的一个错别字-不相关。只使用CSS，我尝试动画一些文本，这样不同的文本块开始隐藏，在计时器上变得可见，然后在计时器上淡出，按顺序。

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

此外，我在

中嵌套了

并添加了一个动画，通过动画化不透明度来淡化

。这将在(n+x)秒后淡出刚刚出现的文本。

淡出没有问题，但弹出从来不起作用。当我尝试动画可见性时，无论怎样，页面总是加载所选文本可见，尽管它的早期设置为隐藏。因此，它不会突然出现。它已经在那页上了。下面是代码和到CodePen的链接。

我走错路了吗？

HTML

<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; }
}

代码笔演示

您可以在预览中看到，页面将#two加载为可见的，尽管在general部分中有p{visibility：hidden；}。移除弹出动画可以解决这个问题。#双容器的淡出动画工作良好。我错过了什么？

明确一点：我并不期望--这里的许多其他人也有这样的期望--可见性会像淡色一样活跃。我希望所需的文本突然出现，然后逐渐褪色--因此第二个动画选择

。可见性的二进制性质很好。

共1个答案

匿名用户

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

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); }
}

代码本演示

相关问题

• 设置ADuser和“用户下次登录时必须更改密码”的问题
• 在服务器上设置SSH身份验证时，Kerberos keytab文件的原因是什么？
• 如何在创建的原始窗口中的控制器之间进行转换
• 父母、节点和场景之间有什么关系？
• 无法初始化类org.ibernate.boot.registry.classloading.internal.ClassLoaderServiceImpl
• JavaFX 第二次启动模式对话框时出现“已设置为另一个场景的根”异常
• 为什么在BorderPane中添加另一个元素会打乱我的格式？
• 如何在JavaFX中解析两个阶段之间的数据？
• JavaFX如何从被调用控制器设置调用控制器中标签的文本
• 为 fxml 中的所有子节点设置边距
• 在多个模型之间导出和重用我的猫鼬连接
• -1和1之间的随机数加和为0
• 如何初始化自定义javafx控制器的成员变量？
• JavaFX2 FXML如何动态添加元素（例如按钮）
• 如何在JavaFX中设置TabPane下拉菜单的样式
• 初始化类路径容器时出错:Eclipse
• 使用格林索克的滚动动画问题
• 将 ArrayList 中的对象序列化为 XML 时丢失类型元素
• 命名导入和默认导入之间的webpack差异
• import React和import { Component }语法之间的差异[重复]

热门标签

---

Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS

Answer 1

热门标签

Answer 2

相关问题

Answer 3

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

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); }
}

代码本演示