时间戳

首页 > 解决方案 > CSS - 淡入不透明动画 - 元素显示然后做动画

css - CSS - 淡入不透明动画 - 元素显示然后做动画

问题描述

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

这是我的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;
}

标签： csscss-animationsopacity

解决方案

我找到的解决方案

标头换行

.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 中将 opactity 设置为 0 并使用填充模式转发它应该可以工作，它在 chrome 上对我有用

推荐阅读