slide in out left right animations

<style>
#slidein {
animation: slide 1s ease;
}
#slidefromright {
animation: slideright 1s ease;
}
#rotate2 {
animation: bigate 1s ease;
transform-origin: center;
width: fit-content;
}
#rotate1 {
animation: smallrotate 1s ease;
transform-origin: center;
width: fit-content;
}
#blur {
animation: blur 1s ease;
}
@keyframes slide {
from {
transform: translateX(-5em);
}
to {
transform: translateX(0);
}
}
@keyframes slideright {
from {
transform: translateX(5em);
}
to {
transform: translateX(0);
}
}
@keyframes smallrotate {
from {
transform: scale(.5) rotate(50deg);
}
to {
transform: scale(1) rotate(0);
}
}
@keyframes bigate {
from {
transform: scale(2) rotate(-50deg);
}
to {
transform: scale(1) rotate(0);
}
}
@keyframes blur {
from {
filter: blur(50px);
}
to {
filter: blur(0);
}
}
</style>
<div id="slidein">
You would change "#slidein" or any of the other IDs I have given to "#text01"/"#image01"/"#container01" etc if you have pro standard.</div>
<div id="slidefromright">
Another example</div>
<div id="rotate1">
Here's another animation I like using.
</div>
<div id="rotate2">
And another.
</div>
<div id="blur">BLUR</div>