Browser source does not display CSS animation [FIXED]

Voxy

Voxy

New Member

EDIT:​

Whoops, I figured it out right as I published this thread. The browser source simply does not support the recently added nesting selector. Removing it fixed the issue.


Hello,

I'm trying to use a browser source to display a local HTML file, containing text animated using CSS. Said HTML file works perfectly as intended in my own browser, but the animation is not playing when loaded into a browser source in OBS (Release 30.2.3, 64-bit), despite the rest of the CSS getting applied just fine.

Here's what my HTML and CSS look like:
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wait Screen</title>
    <link rel="stylesheet" href="textScreens.css">
</head>
<body>
    <div class="title">
        <span style="--i: 0">G</span><span style="--i: 1">E</span><span style="--i: 2">T</span> <span style="--i: 3">C</span><span style="--i: 4">O</span><span style="--i: 5">M</span><span style="--i: 6">F</span><span style="--i: 7">Y</span><span style="--i: 8">!</span>
    </div>
    <div class="subtitle">We’ll get started in a few minutes!</div>
</body>
</html>
CSS: 
html {
    --i: 0;
    display: grid;
    height: 100vh;
    place-items: center;
    color: #1B0D2C;
}
@keyframes bouncy {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(32px);
    }
}
.title {
    font-family: 'Mohr Rounded It';
    font-weight: 1000;
    font-size: 128px;
    line-height: 1;
    & > span {
        display: inline-block;
        animation-name: bouncy;
        animation-duration: 0.5s;
        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
        animation-delay: calc(var(--i) * 0.06s - 0.5s);
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
}
.subtitle {
    font-family: 'Mohr Rounded';
    font-weight: 600;
    font-size: 40px;
    text-align: center;
}

And here's my log file, if it helps: https://obsproject.com/logs/iTeEM5MZiQJTXgqY
 
Suslik V

Suslik V

Active Member
Meanwhile, you may use plain CSS:
CSS: 
html {
    --i: 0;
    display: grid;
    height: 100vh;
    place-items: center;
    color: #1B0D2C;
}
@keyframes bouncy {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(32px);
    }
}
.title {
    font-family: 'Mohr Rounded It';
    font-weight: 1000;
    font-size: 128px;
    line-height: 1;
}
.title > span {
    display: inline-block;
    animation-name: bouncy;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    animation-delay: calc(var(--i) * 0.06s - 0.5s);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.subtitle {
    font-family: 'Mohr Rounded';
    font-weight: 600;
    font-size: 40px;
    text-align: center;
}
 
You must log in or register to reply here.
Top