Question

我在淡入淡出的动画中具有不透明性，它的工作原理非常好，除了事实是在加载页面时显示元素，然后动画...

这是我的 CSS 代码：

RuntimeError: Init operations did not make model ready for local_init.  Init op: <no name for <class 'list'>>, init fn: None, error: Variables not initialized: worker1/weight

这是.header-wrap { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-duration:1s; animation-delay: 1s; }：

keyframes

请帮助，我在做什么错了？

我还尝试将元素的不透明度设置为0，但所有操作都不会在动画之后显示该元素。

@-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-100px);
        -moz-transform: translatex(-100px);
        -o-transform: translatex(-100px);
        transform: translatex(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

Answer 1

我来到的解决方案

标题换行

.header-wrap {
opacity: 0;
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;

webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;   
-o-animation-fill-mode: forwards;     
-ms-animation-fill-mode: forwards;    
animation-fill-mode: forwards;

-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-duration:1s;
animation-delay: 1s;

-webkit-transform: translatex(-100px);
-moz-transform: translatex(-100px);
-o-transform: translatex(-100px);
transform: translatex(-100px);
}

关键帧

@-webkit-keyframes fadeInLeft {
from {
    opacity:0;

}
to {
    opacity:1;
    -webkit-transform: translatex(0px);
    -moz-transform: translatex(0px);
    -o-transform: translatex(0px);
    transform: translatex(0px);

    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity:0;

    }
    to {
        opacity:1;
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
        -o-transform: translatex(0px);
        transform: translatex(0px);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;

    }
    to {
        opacity:1;
        -webkit-transform: translatex(0px);
        -moz-transform: translatex(0px);
        -o-transform: translatex(0px);
        transform: translatex(0px);

    }
}

通过在关键帧方法之前进行翻译，并在页眉换行中将opactity设置为0并向前使用填充模式，它应该可以工作，它在chrome上对我有效

Answer 2

您应该将header-wrap的animation-fill-mode设置为前进，以使动画后的不透明度保持为1

.header-wrap应该看起来像这样

.header-wrap {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0;
}

Answer 3

将2019年5月10日添加到标题中，这样它就不会在加载时显示！然后添加opacity:0，以将动画中的lasts属性应用到标题中

animation-fill-mode:forwards

@-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-100px);
        -moz-transform: translatex(-100px);
        -o-transform: translatex(-100px);
        transform: translatex(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
.header-wrap {
  opacity:0;
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
  animation-fill-mode:forwards;
}

CSS-淡入淡出动画-元素显示然后进行动画

3 个答案: