diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 86f1733..865b359 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import CircularProgressbar from 'react-circular-progressbar';
 import Demo from './Demo';
 
 // Stylesheets
diff --git a/demo/src/Demo.tsx b/demo/src/Demo.tsx
index cceb329..381aa8b 100644
--- a/demo/src/Demo.tsx
+++ b/demo/src/Demo.tsx
@@ -84,11 +84,10 @@ function Demo() {
             counterClockwise
             stylesForPercentage={(percentage: number) => {
               const alpha = (100 + percentage) / 200;
-              return {
-                path: {
-                  stroke: `rgba(62, 152, 199, ${alpha})`,
-                },
-              };
+              return buildStyles({
+                pathColor: `rgba(62, 152, 199, ${alpha})`,
+                pathTransitionDuration: 0.2,
+              });
             }}
           />
         </Example>
diff --git a/src/buildStyles.ts b/src/buildStyles.ts
index a08f5a6..b22a07a 100644
--- a/src/buildStyles.ts
+++ b/src/buildStyles.ts
@@ -10,12 +10,12 @@ export default function buildStyles({
   trailColor,
   backgroundColor,
 }: {
-  rotation?: number;
+  rotation?: number;  // Number of turns, 0-1
   strokeLinecap?: any;
   textColor?: string;
   textSize?: string | number;
   pathColor?: string;
-  pathTransitionDuration?: string;
+  pathTransitionDuration?: number;  // Measured in seconds
   trailColor?: string;
   backgroundColor?: string;
 }): CircularProgressbarStyles {
@@ -29,7 +29,7 @@ export default function buildStyles({
       strokeLinecap: strokeLinecap,
       transform: rotationTransform,
       transformOrigin: rotationTransformOrigin,
-      transitionDuration: pathTransitionDuration,
+      transitionDuration: `${pathTransitionDuration}s`,
     },
     trail: {
       stroke: trailColor,