How to slide in Card from the right

Radzen.Blazor Components
1

On my page I have 1 card, which is loaded and filled during page load.
I want to animate this card to make it slide in from the right to give the page some visual effect.

I'm using bootstrap as CSS framework and created my card as:

        <RadzenCard Style="background-color: #479cc8;">
            <ChildContent>
                <div class="row">
                    <div class="col-md-12">
                        <RadzenImage Path="@(client.Image)" Style="max-height: 200px"></RadzenImage>
                        <div class="row">
                            <div class="col-md-12">
                                <RadzenHeading Size="H1" Text="@(client.Name)" class="card-header"></RadzenHeading>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <RadzenHeading Size="H6" Text="@(client.Street)"></RadzenHeading>
                                                 (...)

I tried using transform: translateX(100%); and transform: translateX(0); but can't get the card back on the right spot again.
So I'm wondering if someone had an example for this.

2

Hi @Paul_Meems,

I think this is a generic CSS/transition question and you will probably have more luck looking for this online.

3

Thanks @korchev for the quick reply.
I'll search more online.

4

I figured out what my problem was. I'd set the delay to non-zero making the card first visibile on its original location, then moved out and then moved back in again.

My working code for future reference:

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 100;
    }

    to {
        transform: translateX(0);
    }
}
.slide-from-right {
    animation-duration: 1s; /* the duration of the animation */
    animation-timing-function: ease-out; /* how the animation will behave */
    animation-delay: 0s; /* how long to delay the animation from starting */
    animation-iteration-count: 1; /* how many times the animation will play */
    animation-name: slideInFromRight; /* the name of the animation we defined above */
}

<RadzenCard class="slide-from-right">