<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Periscope Art Project - Color Dots</title>
  <style>
    body {
      font-family: sans-serif;
    }
    h1,
    .center {
      text-align: center;
    }
    @keyframes fadein {
    	0% { opacity: 0; }
    	30% { opacity: 0.2; }
    	60% { opacity: 0.4;	}
    	100% { opacity:1;	}
    }
    circle {
      animation: fadein 0.4s;
    }
  </style>
  <script src="//cdn.pubnub.com/pubnub-3.7.15.min.js"></script>
</head>
<body><div id="app"></div></body>
<script src="./script.js"></script>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Periscope Art Project - Color Dots</title>
  <style>
    body {
      font-family: sans-serif;
    }
    h1,
    .center {
      text-align: center;
    }
    @keyframes fadein {
    	0% { opacity: 0; }
    	30% { opacity: 0.2; }
    	60% { opacity: 0.4;	}
    	100% { opacity:1;	}
    }
    circle {
      animation: fadein 0.6s;
    }
  </style>
  <script src="//cdn.pubnub.com/pubnub-3.7.15.min.js"></script>
</head>
<body><div id="app"></div></body>
<script src="./script.js"></script>
</html>

Change CSS transition time to 0.6s
Change CSS transition time to 0.6s
