Animation

A basic collection of smooth animations to use within your page.

Usage

To apply this component, add any .uk-animation-* class to an element and it will fade in with a nice animation. These classes are commonly set by using JavaScript to apply the animation to specific behaviors.

Class Description
.uk-animation-fade The element fades in.
.uk-animation-scale-up The element scales up.
.uk-animation-scale-down The element scales down.
.uk-animation-slide-top The element slides in from the top.
.uk-animation-slide-bottom The element slides in from the bottom.
.uk-animation-slide-left The element slides in from the left.
.uk-animation-slide-right The element slides in from the right.
.uk-animation-shake The element shakes.
.uk-animation-scale The element scales down without fading in.

Example

Click on any of the boxes to see the animation.

Fade

Scale up

Scale down

Shake

Slide top

Slide bottom

Slide left

Slide right

Scale

Markup

<div class="uk-animation-fade">...</div>

Reverse modifier

By default, all aimations are incoming. To reverse any animation, add the .uk-animation-reverse class.

Example

Click on any of the boxes to see the animation.

Fade

Scale up

Scale down

Shake

Slide top

Slide bottom

Slide left

Slide right

Scale

Markup

<div class="uk-animation-fade uk-animation-reverse">...</div>

Duration modifier

To stretch the animation duration to 15 seconds, add the .uk-animation-15 class.

Example

Slide right

Markup

<div class="uk-animation-slide-right uk-animation-15">...</div>

Origin modifier

By default, scaling animations originate from the center. To modify this behavior, add one of these classes.

Class Description
.uk-animation-top-left The animation spreads from the top left.
.uk-animation-top-center The animation spreads from the top center.
.uk-animation-top-right The animation spreads from the top right.
.uk-animation-middle-left The animation spreads from the middle left.
.uk-animation-middle-right The animation spreads from the middle right.
.uk-animation-bottom-left The animation spreads from the bottom left.
.uk-animation-bottom-center The animation spreads from the bottom center.
.uk-animation-bottom-right The animation spreads from the bottom right.

Example

Click on any of the boxes to see the animation.

Top Left

Top Center

Top Right

Middle Left

Middle Right

Bottom Left

Bottom Center

Bottom Right


Animation hover

To trigger an animation on hover, just add the .uk-animation-hover class to the animated element itself or to a container.

Example

Fade

Slide right

Markup

<div class="uk-animation-hover uk-animation-fade">...</div>

<div class="uk-animation-hover">
    <div class="uk-animation-slide-right">...</div>
</div>

Testimonials

  • P Dave

    Reliable tenants made being landlord stress free. Besides being professional they are also well versed with nitty-gritties of Landlord tenant issue. As a first time landlord they helped me understand the the importance of choosing a right tenant. I always recommend Reliabletenants to my colleagues & friends.

  • Preet A

    My investment properties keep on changing but Reliabletenants are constant. With them at the helm I go about my work / travel abroad / go on vacations with a complete peace of mind. For all those investors out there, I strongly recommend reliabletenants.ca.

  • Robert Polski

    "You guys are so good! You guys actually exceeded my expectations from a Realtor!"

  • B & J smith

    I am thankful to my friend for recommending reliabletenants.ca and I in turn referred them to everyone I know. The reason is obvious. They are one of the finest, most knowledgeable and most respected agents I have ever met. They provide an excellent service. But don’t just read this, try them out for yourself. You’ll see.”

  • SAAD ABDO

    I want to let you know that we were really happy with reliabletenants.ca for sheltering us from all the unpleasent issues of being a landlord. we would definitely keep you in our mind for our next project

  • A & F Sultan

    "It is our pleasure to express thanks to reliabletenants.ca for giving us peace of mind. I was tired & overwhelmed with various issues arising & was ready to sell my property. I am more than happy to have retained my investment property. I would recommend reliabletenants without any reservations or second thoughts to our friends and family."

  • Odombo P.

    Reliabletenants are reliables themselves – Take it from me. They are looking after Mine & my relatives properties. So far no issues. Hopefully it continues in future too.

  • LE NGUYEN

    Reliabletenants are reliables themselves – Take it from me. They are looking after Mine & my relatives properties. So far no issues. Hopefully it continues in future too.

  • T PIETOWSKI

    I wish I had listened to reliabletenants.ca when they told me to transfer all utility bills to tenant, I didn't follow their advice & had to suffer because of the same. From then on I follow their suggestions to T.

  • Rajiv

    Reliabletenants.ca are a group of good folks. Everyone knows their role which in turn makes things very present for Landlord. Happy:)

Social

Logout