Fade in and out using CSS on javascript multiple pages

On my website I have two links, if you click on portfolio, the div portfolio becomes visible.

I use this code to switch between them <a href="" onclick="return show('portfolio','profile');">

How can I make a quick fade-in-out between the divs using CSS? Visit my site here and you'll see.

Solution

I've created a small demo for you to look at and have an idea of what AlexG is suggesting in Option 1 using CSS Animations (and jQuery).

JSFiddle

CODE SNIPPET:

var vHome = $("#home"),
  vPortfolio = $("#portfolio"),
  bTriggerHome = $("#trigger-home"),
  bTriggerPortfolio = $("#trigger-portfolio");

function switchView() {
  vHome.add(vPortfolio).toggleClass("hide-view");
};

bTriggerHome.add(bTriggerPortfolio).on("click", function() {
  switchView();
});

#home,
#portfolio {
  height: 500px;
  animation: fadeInUp 1s both;
}
#home {
  background-color: tomato;
}
#portfolio {
  background-color: royalblue;
}
.hide-view {
  display: none;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">
  <button id="trigger-portfolio">
    Switch View
  </button>
</div>

<div id="portfolio" class="hide-view">
  <button id="trigger-home">
    Switch View
  </button>
</div>