CODEWITHSUNDEEP
htmlcsscss-transitions
Paul Brunache
Paul Brunache

Reputation: 625

ease in from left to right Css3

I've been searching for two hours trying to figure out how to make this transition happen? I've tried the code from W3 schools but it just made my Div bigger http://themeforest.net/item/kappe-full-screen-portfolio-blog-wp-theme/full_screen_preview/6854128

This is what I have so far

 .nav{
width:20%;
position:fixed;
margin-right: 1.25%;
margin-left:1.55%;
background-color:white;
height:auto;
font-weight:bold;
box-shadow: 
            0px 11px 8px -10px #CCC,
            -15px -8px 8px -10px #CCC;
}
.nav li {
text-align:right;
}

nav li a{

background-color:white;
color:black;
text-decoration:none;
padding-right:5%;
display:inline-block;
padding-left:70%;
border-right: 1px dotted #DCDCDC;
border-bottom: 1px dotted #DCDCDC;
border-top: 1px dotted #DCDCDC;
font-size: 150%;
font-weight:300;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-transition:width 2s; /* For Safari 3.1 to 6.0 */
transition:width 2s;
}

.nav li:hover a
{
color:white;
background: #2876b2;
width:100%;
}

<div class="nav left" >

<nav >
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">Home</a> </li>
<li> <a href="#">Home</a> </li>
<li> <a href="#">Home</a> </li>                          
</ul>

</nav>

Upvotes: 1

Views: 3512

Answers (2)

coma
coma

Reputation: 16649

http://jsfiddle.net/coma/UhErG/

nav a span {
    position: relative;
    z-index: 1;
}

nav a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    background-color: #1AB5B3;
    transition: right 250ms;
}

nav a:hover:after {
    right: 0;
}

Upvotes: 2

jrK
jrK

Reputation: 51

The 'transition' property in CSS can be very easily achieved using a LESS or SASS Mixin. If you are not familiar with using a CSS Preprocessor, I would recommend reading up on using a framework like LESS or SASS. They have made writing CSS much much easier for me.

LESS introduces all sorts of things, my favorite being the 'mixin'.

Here is a mixin example that takes care of your "ease in" desire.

/* Mixin */
  .transition (@prop: all, @time: 1s, @ease: linear) {
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -o-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
}





/* Example on how to use mixin with div */

#somediv {
    .transition(all, 0.5s, ease-in);
}

If this isn't exactly what you want, I am most positive you can achieve it through a less mixin of some sort. Hopefully I got you started in the right direction !

Upvotes: 1

Related Questions