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

概述编辑：纠正了下面 ARLCode所指出的CSS中的拼写错误 – 不相关. 仅使用CSS,我试图动画一些文本,以便不同的文本块开始隐藏,在计时器上可见,然后按顺序淡入计时器. 首先,我从使用p {visibility：hidden}隐藏的所有文本开始,并添加动画以在n秒后更改可见性值. 另外,我嵌套了< p> in< div>并添加了一个淡入淡出的动画< div>通过动画不透明度.在(n x)秒之后 编辑：纠正了下面 ARLCode所指出的CSS中的拼写错误 – 不相关.
仅使用CSS,我试图动画一些文本,以便不同的文本块开始隐藏,在计时器上可见,然后按顺序淡入计时器.

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

另外,我嵌套了< p> in< div>并添加了一个淡入淡出的动画< div>通过动画不透明度.在(n x)秒之后,这应该淡化刚刚出现的文本.

淡出没有问题,但是pop-in永远不会奏效.当我尝试为可见性设置动画时,无论如何,页面始终加载所选文本,尽管其早期设置为隐藏.因此,它不会d出.它已经在页面上了.下面是代码和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; }}

Code Pen Demo

您可以在预览中看到页面加载#two为可见,尽管在常规部分中有p {visibility：hIDden;}.删除pop-in动画修复了这个问题. #two-container的淡出动画效果很好.我错过了什么？

一个明确的要点：我不希望 – 这里有许多其他人 – 可以看到动画作为褪色.我希望突然出现所需的文本,并且AFTERWARDS逐渐淡出 – 因此第二个动画选择< 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 Demo

总结

以上是内存溢出为你收集整理的html – 为一个元素设置初始可见性和动画可见性之间是否存在冲突？全部内容，希望文章能够帮你解决html – 为一个元素设置初始可见性和动画可见性之间是否存在冲突？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。