HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<h1> SLIDE-IN-FROM </h1>
<div slide-in-from="top" style="--sif-delay: 250ms">
<code>[slide-in-from="top"]</code></div>
<div slide-in-from="left" style="--sif-delay: 500ms">
<code>[slide-in-from="left"]</code></div>
<div slide-in-from="right" style="--sif-delay: 750ms">
<code>[slide-in-from="right"]</code></div>
<div slide-in-from="bottom" style="--sif-delay: 1000ms">
<code>[slide-in-from="bottom"]</code></div>
<div slide-in-from="top-left" style="--sif-delay: 1250ms">
<code>[slide-in-from="top-left"]</code></div>
<div slide-in-from="top-right" style="--sif-delay: 1500ms">
<code>[slide-in-from="top-right"]</code></div>
<div slide-in-from="bottom-left" style="--sif-delay: 1750ms">
<code>[slide-in-from="bottom-left"]</code></div>
<div slide-in-from="bottom-right" style="--sif-delay: 2000ms">
<code>[slide-in-from="bottom-right"]</code></div>
</body>
</html>
CSS SOURCE CODE
[slide-in-from] {
opacity: 0;
transform: translateY(var(--translateY,0)) translateX(var(--translateX, 0));
animation: slideInFrom var(--sif-duration, 250ms)var(--sif-timing, ease-out) var(--sif-delay, 0ms) forwards;
}
[slide-in-from ^= "top"] { --translateY: -100% }
[slide-in-from ^= "bottom"] { --translateY: 100% }
[slide-in-from $= "left"] { --translateX: -100% }
[slide-in-from $= "right"] { --translateX: 100% }
@keyframes slideInFrom{ to {transform: unset; opacity:unset }}
body {
display: grid;
gap: 1rem;
place-items: center;
padding: 1rem;
font-family: sans-serif;
color: white;
text-align: center;
background: #1D1E22 }
div {
padding: 0.5rem 1rem;
background-color: var(--clr);
color: black;
border-radius: 0.25rem;
font-size: 0.9rem;
font-weight: 700;
box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / .5)}
div:nth-of-type(1){ --clr: #78C5D5 }
div:nth-of-type(2){ --clr: #459BA8 }
div:nth-of-type(3){ --clr: #79C268 }
div:nth-of-type(4){ --clr: #C5D747 }
div:nth-of-type(5){ --clr: #F5D63D }
div:nth-of-type(6){ --clr: #F18C32 }
div:nth-of-type(7){ --clr: #E868A1 }
div:nth-of-type(8){ --clr: #BF63A6 }
