1

I'm looking for a technique to pass an inline element to block through transition when the max-width of the screen is 800px. The margin transition works properly.

My css is the following in SASS:

         li{
            font:{
                size: 18px;
                weight: bold;
            }&:hover{
                color: yellow;
            }
            display: inline;
            margin-right: 10px;
            -webkit-transition-property: display;
            -webkit-transition-property: margin;
            -webkit-transition-duration: 2s;
            @media screen and (max-width: 800px) {
                display: block;
                margin-right: 80px;
            }
        }
Pete
  • 57,112
  • 28
  • 117
  • 166
Antonio
  • 15
  • 5
  • 1
    Display property cannot be transitioned - [Source](http://www.w3.org/TR/css3-transitions/#animatable-properties-). You could also have a look at this [thread](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) for some other ways. – Harry Jul 11 '14 at 09:43
  • I guessed something like this. I'll use position property then. Thanks – Antonio Jul 11 '14 at 09:51
  • you could try `display:inline-block` and then transition the width from auto to 100% – Pete Jul 11 '14 at 10:08
  • @Pete: transitions need a fixed width, so `auto` can't be used. But yeah the idea is correct :) Can be done with something like `max-width` – Harry Jul 11 '14 at 10:12
  • @Harry ah cool, I haven't played with transitions yet – Pete Jul 11 '14 at 10:14

0 Answers0