Transition not working for any property?

Question

I'm trying to transition a button to move slightly to left smoothly, I can make the button move with padding-right so its not a syntax problem. The transition just doesnt seem to work at all, for any property I use.

Code that isn't working:

    #home:hover
{
    padding-right: 10px;

    transition: padding-right 0.3s ease;
}

CSS:

/****Font Faces****/
@font-face {
    font-family: 'bebas book';
    src: local('?'),
        url('../fonts/bebas book.woff') format('woff');
}

@font-face {
    font-family: 'bebas light';
    src: local('?'),
        url('../fonts/bebas light.woff') format('woff');
}

@font-face {
    font-family: 'bebas regular';
    src: local('?'),
        url('../fonts/bebas regular.woff') format('woff');
}


/****Hover Modifiers****/
header:hover #home, header:hover #portfolio,
header:hover #about, header:hover #contact
{
    opacity: 1;

    transition: opacity 0.3s ease;
}

header:hover #menuIcon {
    margin: 20px 50px;

    transition: margin 0.3s ease;
}

header:hover {
    width: 120px;

    transition: width 0.3s ease;
}

#home:hover
{
    padding-right: 10px;

    transition: padding-right 0.3s ease;
}


/****Page Modifiers****/
body {
    margin: 0; padding: 0;
}


/****Header Modifiers****/
header {
    margin: 0; padding: 0;
    height: 100vh; width: 60px;

    position: fixed;

    opacity: 0.85;

    background: #120C08;

    transition: width 0.3s ease;
}

#menuIcon {
    margin: 20px;

    transition: margin 0.3s ease;
}

#home, #portfolio,
#about, #contact 
{
    right: 10px;

    position: absolute;

    opacity: 0;

    text-decoration: none;

    color: #FAECD4;

    font-family: bebas book;
    font-size: 25px;

    transition: opacity 0.3s ease;
}

#home {top: 80px;} #portfolio {top: 120px;}
#about {top: 160px;} #contact {top: 200px;}


/****Body Content****/
#mainImgWrapper {
    height: 100vh; width: 100%;

    background: url("../images/mainImage.jpg") no-repeat center center fixed;
}

mildog8 · Accepted Answer · 2014-10-26T23:12:37.270

2

add this

#home {
    padding-right: 0px;
    transition: opacity 0.3s ease, padding-right 0.3s ease !important;
}

...

#home:hover {
    padding-right: 10px;
}

edited Oct 26 '14 at 23:12

answered Oct 26 '14 at 22:58

mildog8

2,030
2
22
36

Nope hasn't done it, pretty sure I'm putting the code in correctly. – user3307694 Oct 26 '14 at 23:11
Thats it, thanks! mind explaining briefly what !important does? – user3307694 Oct 26 '14 at 23:13
It means 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!' http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean. If you did not want to use `!important` you could simply put this code at the bottom of your css file instead. – mildog8 Oct 26 '14 at 23:19

Transition not working for any property?

1 Answers1