Need some help with CSS animation

Coding Help
,
1

hi there. i’m new to coding css animation. i’ve been trying to fix the “disappearing text” for a hour now.
so, i decided to get some help. i apologize if this question was posted already but

“Is it possible to make sequential fade in using css animation without using jQuery?”

HTML:

<div id="box4">
    <img src="/art01.png" style="width:55%;position: relative;  left: 0px;" class="fadeINImage">
    <div style="position: absolute;  right: 16px;top:16px;font-family: Chiller;font-size: 240px;" class="fadeInText1">
        dec0de284
        <div style="position: absolute; text-align:right;font-size: 100px;top:250px">
            sample text
        </div>
    </div>
</div>

CSS:
.fadeINImage{animation:opac 1.5s;}@keyframes opac{from{opacity:0} to{opacity:1}}
.fadeInText1{opacity:0;animation:opac 1.5s;animation-delay: 1s;}@keyframes opac{from{opacity:0} to{opacity:1}}

Output:
prob1

2

nah, i solved it myself. thanks, me!

HTML:

<div id="box4">
    <img src="/art01.png" class="fadeINImage">
    <div class="fadeInText1">
        dec0de284
        <div style="position: absolute; text-align:right;font-size: 100px;top:250px">
            sample text
        </div>
    </div>
</div>

CSS:

.fadeINImage{
    width:55%;
    position: relative;
    left: 0px;
    animation: fadeIn 2s;
}

.fadeInText1{
    position: absolute;
    right: 16px;
    top:16px;
    font-family: Chiller;
    font-size: 240px;
    /*solution*/
    opacity: 0;
    animation: fadeIn 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

thanks

4 Likes
3

animation-fill-mode: forwards, in case anyone doesn’t want to wade though a bunch of other code

3 Likes
4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.