How can I CSS Header Logo Swap with transition for responsive UI

Question

I have the following code to transition to a mobile image when the browser resizes, but the change it too abrupt. I want it to animate. Is there a way? Also, I am using Bootstrap and AngularJs, so am is there a way built into either of these frameworks to do this for me?

<a href="/">
  <div class="logo">
    <img id="desktoplogoimage" src="images/logo.png" alt="">
    <img id="logoimage" src="images/logo-mobile.png" alt="">
  </div>
</a>


.logo img {
  display:block;
}

.logo img+img {
  display:none;
}


@media only screen and (min-width: 150px) and (max-width: 600px) {
  .logo img {
    display:none;
  }

  .logo img+img {
    display:block;
  }
}

Answer 1

If you want a CSS only solution here is an example i quickly put together. Resize fiddle window to see effect.

DEMO http://jsfiddle.net/fgasU/613/

img {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    width:50%;
    position: absolute;
    left:0;
    top:0;
}
.small {
    opacity:0;
}
@media only screen and (min-width: 150px) and (max-width: 600px) {
    .large {
        opacity:0;
    }
    .small {
        opacity:1;
    }
}

Answer 2

.logo img {
   display:block;
}
.logo img+img {
   display:none;
   opacity: 0; 
   transition: opacity .15s ease-in-out;
}

@media only screen and (min-width: 150px) and (max-width: 600px){
.logo img {
   display:none; 
   opacity: 0; 
   transition: opacity .15s ease-in-out;
}

.logo img+img {
   display:block;
} 

add opacity and then transition for like above!

Answer 3

If the image is the same for diferents resolution, you can adjust your image to you logo div when the div increase your image size will increase the size.

For diferents images you could use CSS transistions

.logo img {
  display:block;
}
.logo img+img {
   display:none;
   opacity: 0; 
   transition: opacity .25s ease-in-out;
}

@media only screen and (min-width: 150px) and (max-width: 600px){
.logo img {
   display:none; 
   opacity: 0; 
   transition: opacity .25s ease-in-out;
}

.logo img+img {
   display:block;

}