How to create transitions effects of animated slideshow to display text from different direction show/hide based on mouse hover uses of “-webkit-transition:all 0.1s linear” property of css3 without javascript/JQuery

[vijayk3327]

In this post we are going to learn about How to create transitions effects of animated slideshow to display text from different direction show/hide based on mouse hover uses of “-webkit-transition:all 0.1s linear” property of css3 without javascript/JQuery.

Mouse over the element below to see a CSS transition effect:-

The transition-timing-function property specifies the speed curve of the transition effect.

👉 Get source code live demo link:-

Create HTML File →
Step 1:- Create HTML File : animate-translate.html

`

<title>Animate Hover</title>

Welcome to home page

This is default description. This is default description. This is default description.

read more...

Welcome to home page

This is default description. This is default description. This is default description.

read more...

        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

`

Create a separate folder for Style CSS →
Step 2:- Create HTML Style CSS: css/animate-style.css

` body{ margin:0; padding:20px; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#333333;}

/mask1/
.view{ width:300px; height:150px; border:1px #ccc solid; background:#eee; margin:0 15px 20px 0; position:relative; overflow:hidden; }
.view .mask1{ height:150px; width:300px; background:rgba(200,0,0,0.1); -webkit-transition:all 0.2s linear; opacity:0;}
.view .mask1 h1{ margin:0; padding:0; font-size:17px; color:#FF0000; padding:0 0 2px 0; -webkit-transform:translateX(300px); -webkit-transition:all 0.2s linear; opacity:0;}
.view .mask1 p{ margin:0; padding:0; font-size:15px; color:#333; padding:0 0 10px 0; -webkit-transform:translateX(-300px); -webkit-transition:all 0.2s linear; opacity:0;}
.view .mask1 a{ text-decoration:none; padding:3px 10px; display:inline-block; color:#fff; background:#009999; -webkit-transform:translateY(-300px); -webkit-transition:all 0.2s linear; opacity:0;}
.content{ padding:20px 0 0 20px;}

.view .mask1:hover{ opacity:1;}
.view:hover .mask1 h1{ -webkit-transform:translateY(0px); -webkit-transition:all 0.1s linear; opacity:1; -webkit-transition-delay:1s;}
.view:hover .mask1 p{ -webkit-transform:translateY(0px); -webkit-transition:all 0.2s linear; opacity:1; -webkit-transition-delay:2s;}
.view:hover .mask1 a{ -webkit-transform:translateY(0px); -webkit-transition:all 0.3s linear; opacity:1; -webkit-transition-delay:3s;}

/mask2/
.view{ width:300px; height:150px; float:left; border:1px #ccc solid; background:#eee; margin:0 15px 20px 0; position:relative; overflow:hidden; }
.view .mask2{ height:150px; width:300px; background:rgba(200,0,0,0.1); -moz-transition:all 0.2s linear; -moz-transform:translateX(300px) ; opacity:1;}
.view .mask2 h1{ margin:0; padding:0; font-size:17px; color:#FF0000; padding:0 0 2px 0; -webkit-transform: translateY(-100px); -webkit-transition:all 0.2s linear; opacity:1; position: relative; }
.view .mask2 p{ margin:0; padding:0; font-size:15px; color:#333; padding:0 0 10px 0; -webkit-transform:translateX(600px); -webkit-transition:all 0.2s linear;}
.view .mask2 a{ text-decoration:none; padding:3px 10px; display:inline-block; color:#fff; background:#009999; -webkit-transform:translateY(600px); -webkit-transition:all 1s linear;}
.content{ padding:20px 0 0 20px;}

.view .mask2:hover{ -moz-transform:translateX(0px);}
.view:hover .mask2 h1{-webkit-transform: scale(2,2); -webkit-transition:all 0.5 linear; -webkit-transform: translateY(0);}
.view:hover .mask2 p{-webkit-transform:translateX(0px);}
.view:hover .mask2 a{-webkit-transform:translateY(0px);}

/bounce up/

.myAnimation {
clear: both;
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation: myfirst 2s linear 1s infinite alternate;

}

.myslide{width: 50px; height: 50px; position: relative; border: 1px #ff0000 solid; background: #ff0000; border-radius: 100px; -webkit-animation:slidefirst 3s linear 1s infinite alternate;}

/@-webkit-keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; top:-200px; opacity: 0;}
50% {background-color:blue; top:0px; opacity: 1;}
75% {background-color:green; top:-200px; opacity: 0;}
100% {background-color:red; top:0px; opacity: 1;}
}/

@-webkit-keyframes myfirst {
0% {background-color:red; top:0px;}
25% {background-color:red; -webkit-transform:translateY(-200px); opacity: 0;}
50% {background-color:red; -webkit-transform:translateY(0px); opacity: 1;}
75% {background-color:red; -webkit-transform:translateY(-200px); opacity: 0;}
100% {background-color:red; -webkit-transform:translateY(0px); opacity: 1;}
}

@-webkit-keyframes slidefirst{
0% {-webkit-transform:translateX(0px);}
25% {-webkit-transform:translateX(300px); opacity: 0}
50% {-webkit-transform:translateX(0px); opacity: 1;}
75% {-webkit-transform:translateX(300px); opacity: 0}
100% {-webkit-transform:translateX(3000px); opacity: 1;}
}`

👉 Get source code live demo link:-