CODEWITHSUNDEEP
cssanimation
gab
gab

Reputation: 43

CSS width animation doesn't work

I tried everything but I have no idea why these animations don't work. can anybody help me?

.link {
    float:right;
    clear:both;
    padding:30px;
    font-size:20px;
    background-color: yellow;
    color: #333;
    font-family: Dosis;
    font-weight: 700;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    text-align:right;
}

.link:hover {
    width:100%;
    transition: width 2s;
}
<div class="link">Something</div>
<div class="link">about</div>
<div class="link">you</div>
<div class="link">makes</div>
<div class="link">me</div>

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Upvotes: 0

Views: 87

Answers (3)

WizardCoder
WizardCoder

Reputation: 3461

You could transition min-width instead of width. You can only transition from one value to another, that's why transitioning between "auto" and "100%" doesn't work.

.link {
    float:right;
    clear:both;
    padding:30px;
    font-size:20px;
    background-color: yellow;
    color: #333;
    font-family: Dosis;
    font-weight: 700;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: min-width 1s ease-in-out;
    -moz-transition: min-width 1s ease-in-out;
    -o-transition: min-width 1s ease-in-out;
    transition: min-width 1s ease-in-out;
    text-align:right;
    min-width:0;
}

.link:hover {
    min-width:100%;
    -webkit-transition: min-width 1s ease-in-out;
    -moz-transition: min-width 1s ease-in-out;
    -o-transition: min-width 1s ease-in-out;
    transition: min-width 1s ease-in-out;
}
<div class="link">Something</div>
<div class="link">about</div>
<div class="link">you</div>
<div class="link">makes</div>
<div class="link">me</div>

Upvotes: 0

Robert Negreanu
Robert Negreanu

Reputation: 171

Maybe it's overcomplicated but it seems that works :)

$(document).ready(function() {
    $('.link').each(function() {
    var value = $(this).width();
    $(this).css({"width":value});
    $(this).hover(function(){
    $(this).css({"width":"100%"});
    },function(){
    $(this).css({"width":value});
    })
    })
});
.link {
  width: auto;
   float:right;
    clear:both;
    padding:30px;
    font-size:20px;
    background-color: yellow;
    color: #333;
    font-family: Dosis;
    font-weight: 700;
    text-transform:uppercase;
    text-decoration:none;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    text-align:right;
}

.link:hover {
    width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">Something</div>
<div class="link">about</div>
        <div class="link">you</div>
        <div class="link">makes</div>
        <div class="link">me</div>

Upvotes: 2

Shashank
Shashank

Reputation: 407

Here you go.... 

.link {
            float:right;
            clear:both;
            padding:30px;
            font-size:20px;
            width: 100px;
            height: 100px;
            color: #333;
            font-family: Dosis;
            font-weight: 700;
            text-transform:uppercase;
            text-decoration:none;
            background: yellow;
            -webkit-transition-property: width; /* Safari */
            -webkit-transition-duration: 2s; /* Safari */
            transition-property: width;
            transition-duration: 2s;
        }

        .link:hover {
             width: 100%;
        }
<div class="link">Something</div>
        <div class="link">about</div>
        <div class="link">you</div>
        <div class="link">makes</div>
        <div class="link">me</div>

Upvotes: 0

Related Questions