CODEWITHSUNDEEP
javascripthtmlcsscss-transitions
Ricky
Ricky

Reputation: 702

CSS transition from right to left

a { color: #000; text-decoration: none; }
a.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    overflow: hidden;

    padding: 8px;

    border: 1px solid #ccc;
    border-radius: 8px;

    background: #eee;

    transition: .2s;

    .material-icons {
        font-size: 24px;

        transition: .2s;
    }

    .label-hidden {
        max-width: 0;
        opacity: 0;

        max-height: 1em;
        white-space: nowrap;

        transition: .2s;
    }

    &:hover {
        .label-hidden {
            max-width: 200px;

            margin-left: 8px;
            opacity: 1;
        }
    }
}
<a class="button button-small"
   target="_blank" rel="noopener noreferrer"
   href={ "https://www.google.com/maps/search/" + it["Station Name"] }>
  <i class="material-icons">map</i>
  <span class="label-hidden">Show location</span>
</a>

I want to apply CSS to my project and use transition for animation in the below link. example in this the transition moves from left to right but I want the transition from right to left.

Any solution will be helpful

Thanks in advance.

Upvotes: 0

Views: 250

Answers (1)

Crystal
Crystal

Reputation: 1992

Do you mean like this??

.wrapper {
    text-align: center;
    }
    
a { 
   color: #000; 
   text-decoration: none; 
   }
   
a.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #eee;
    transition: .2s;
}

.material-icons {
    font-size: 24px;
    transition: .2s;
}

.label-hidden {
    max-width: 0;
    opacity: 0;
    max-height: 1em;
    white-space: nowrap;
    transition: .2s;
    
}

a.button:hover .label-hidden {
     max-width: 300px;
     margin-left: 8px;
     opacity: 1;
}

a.button:hover {max-width: 200px;}

/* SAMPLE 2 CSS */

.wrapper2 {
    text-align: center;
    }
    
a { color: #000; 
    text-decoration: none; 
    }
    
a.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #eee;
    transition: .2s;
    max-width: 50px;
}

.material-icons {
    font-size: 24px;
    transition: .2s;
}

.label-hidden2 {
    max-width: 0;
    opacity: 0;
    max-height: 1em;
    white-space: nowrap;
    transition: .2s;
    display: none;
}

a.button1:hover .label-hidden2 {
     position: fixed;
     opacity: 1;
     left: 25%;
     display: inline;
}

a.button1:hover { 
    padding-left:135px;
    margin-right:130px;
    }
<!-- SAMPLE 1  -->
<div class="wrapper">
<a class="button button-small"
   target="_blank" rel="noopener noreferrer"
   href={ "https://www.google.com/maps/search/" + it["Station Name"] }>
  <span class="label-hidden">Show location</span>
  <i class="material-icons">map1</i>
  
</a>
</div>
<br />
<!-- SAMPLE 2  -->

<div class="wrapper2">
<a class="button button-small button1"
   target="_blank" rel="noopener noreferrer"
   href={ "https://www.google.com/maps/search/" + it["Station Name"] }>
     
  <i class="material-icons"><span class="label-hidden2">Show location</span>map2</i>
  
  
</a>
</div>

Upvotes: 2

Related Questions