hero.js

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

const Hero = () => (
  <div className="hero">
    <ReactCSSTransitionGroup
      component="div"
      className="hero_text"
      transitionName="is-loaded"
      transitionEnterTimeout={300}
      transitionLeaveTimeout={300}
    >
      <h4 key="hero_h4">The most recent project</h4>
      <h2 key="hero_h2">My name is Alexander Torn. I’m front-end engineer, javascript developer and also digital nomad.</h2>
      <a key="hero_a" download="alexander-torn-cv.pdf" className="btn" href="/cv">Download CV <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill="#fff" d="M0 14h16v2H0v-2zM8 13l5-5h-3V0H6v8H3z" /></svg></a>
    </ReactCSSTransitionGroup>
  </div>
);

export default Hero;

component:

import React from 'react';

const Hero = () => (
  <div className="hero">
      <h4 key="hero_h4">The most recent project</h4>
      <h2 key="hero_h2">My name is Alexander Torn. I’m front-end engineer, javascript developer and also digital nomad.</h2>
      <a key="hero_a" download="alexander-torn-cv.pdf" className="btn" href="/cv">Download CV <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill="#fff" d="M0 14h16v2H0v-2zM8 13l5-5h-3V0H6v8H3z" /></svg></a>
  </div>
);

export default Hero;

css:

.hero_h4, hero_h2, .hero_a {
  animation: .9s heroAnimate ease-in-out forwards;
}

@keyframes heroAnimate {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}