CSS

Question

我有一个带有不透明度的淡入淡出动画，它工作得很好，除了事实是元素在页面加载时显示，然后动画...

这是我的CSS代码：

.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:

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

请帮忙，我做错了什么？

我也试过在我的元素中将不透明度设置为 0，但所做的只是在动画之后不显示元素。

.header-wrap {
    opacity: 0;
}

Answer 1

您应该将 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 2

将 opacity:0 添加到您的 header，这样它就不会在加载时显示！然后添加 animation-fill-mode:forwards 以将动画中的 last 属性应用到 header

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

<h1 class="header-wrap">header</h1>

Answer 3

我得出的解决方案

header-wrap

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

    }
}

通过在你的关键帧方法之前进行翻译并在 header-wrap 中将不透明度设置为 0 并使用向前填充模式它应该可以工作，它在 chrome

上对我有用

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

CSS - Fade In Opacity Animation - Element shows then does animation

opacity

css-animations