Question

我的目标是在宽度为1400,1600和1800像素的窗口重新调整大小时淡化.container内容。目前，动画只会在1400分时发射一次，而其他动画都不会发射。

最终，我希望.container在重新调整大小的事件期间淡出并重新进入，以提供良好的UI体验。我不完全确定这是否可以单独使用CSS，或者是否需要一些JS ......

.container
{
    width: 1225px;
    left: -2px;
    padding-top: 275px;
    padding-left: 37px;
    position: relative;

}

@media (min-width: 1400px) {
.container
{
    width: 1375px;
    left: -60px;
    -webkit-animation: fadeonresize 0.6s ease-in-out;
}
}

@media (min-width: 1600px) {
.container
{
    width: 1575px;
    left: -140px;
    padding-top: 272px;
    -webkit-animation: fadeonresize 0.6s ease-in-out;
}
}

@media (min-width: 1800px) {
.container
{
    width: 1800px;
    left: -260px;
    padding-left: 36px;
    padding-top: 285px;
    -webkit-animation: fadeonresize 0.6s ease-in-out;
}
}

@-webkit-keyframes fadeonresize { from { opacity: 0; } to { opacity: 1; }}

Answer 1

这是因为在动画运行一次之后，在任何断点处，它都不会再次运行它，因为它已经是一个CSS属性，并且断点之间没有发生变化。由于动画没有重复设置，因此它仅在第一次遇到动画时运行。尝试设置三个不同的动画，如下所示：

@media (min-width: 1400px) {
.container
{
    width: 1375px;
    left: -60px;
    -webkit-animation: fadeonresize1 0.6s ease-in-out;
}
}

@media (min-width: 1600px) {
.container
{
    width: 1575px;
    left: -140px;
    padding-top: 272px;
    -webkit-animation: fadeonresize2 0.6s ease-in-out;
}
}

@media (min-width: 1800px) {
.container
{
    width: 1800px;
    left: -260px;
    padding-left: 36px;
    padding-top: 285px;
    -webkit-animation: fadeonresize3 0.6s ease-in-out;
}
}

@-webkit-keyframes fadeonresize1 { from { opacity: 0; } to { opacity: 1; }}
@-webkit-keyframes fadeonresize2 { from { opacity: 0; } to { opacity: 1; }}
@-webkit-keyframes fadeonresize3 { from { opacity: 0; } to { opacity: 1; }}

在CSS媒体查询期间淡出/淡出DIV

1 个答案: