Add subtle bounce of first single day at start

src/Components/SingleDayForecast/Component.css

@@ -1,3 +1,16 @@
+@keyframes SingleDayForecast-summary-init-bounce {
+  0% {
+    transform: translate(0, -50%);
+  }
+  50% {
+    transform: translate(0, -60%);
+  }
+
+  100% {
+    transform: translate(0, -50%);
+  }
+}
+
 .SingleDayForecast {
   float: left;
   width: 20%;
@@ -31,11 +44,15 @@
   transition: 1s all;
 }
 
-.SingleDayForecast.maximize .summary {
+.SingleDayForecast.maximized .summary {
   top: 45%;
   transform: translate(0, -50%);
+
 }
 
+.SingleDayForecast:nth-child(1).maximized-initial .summary {
+  animation: SingleDayForecast-summary-init-bounce 1s ease-in-out 1s 1;
+}
 
 .SingleDayForecast .summary>* {
   padding: 0.125em 0;
@@ -97,7 +114,7 @@
   transition: opacity 1s;
 }
 
-.SingleDayForecast.maximize  .summary .bottom-dividor{
+.SingleDayForecast.maximized  .summary .bottom-dividor{
   opacity: 0;
 }
 
@@ -114,7 +131,7 @@
   transition: visibility 0s 1s;
 }
 
-.SingleDayForecast.maximize .details {
+.SingleDayForecast.maximized .details {
   visibility: hidden;
 
   transition: visibility 0s 0s;

src/Components/SingleDayForecast/Component.tsx

@@ -12,13 +12,15 @@ export interface SingleDayForecastProps {
 
 type numberOrString = number | string;
 
-export class SingleDayForecast extends React.Component<SingleDayForecastProps, { maximized: boolean }> {
+export class SingleDayForecast extends React.Component<SingleDayForecastProps,
+  { maximized: boolean, maximizedInitial: boolean }
+  > {
 
   constructor(props: SingleDayForecastProps) {
     super(props);
 
     this.props = props;
-    this.state = { maximized: true };
+    this.state = { maximized: true, maximizedInitial: true };
 
     this.minimizeIfAlreadyMaximized = this.minimizeIfAlreadyMaximized.bind(this);
     this.maximizeIfAlreadyMinimized = this.maximizeIfAlreadyMinimized.bind(this);
@@ -94,7 +96,7 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
   }
 
   changeMaximize() {
-    this.setState((prevState) => { return { maximized: !prevState.maximized }; });
+    this.setState((prevState) => { return { maximized: !prevState.maximized, maximizedInitial: false }; });
   }
 
   maximizeIfAlreadyMinimized() {
@@ -109,20 +111,26 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
     }
   }
 
+  calcMainTagClassnames(): string {
+    const MainTagName = 'SingleDayForecast';
+    const allClassNames = [MainTagName];
+
+    if (this.state.maximized) {
+      allClassNames.push('maximized');
+    }
+    if (this.state.maximizedInitial) {
+      allClassNames.push('maximized-initial');
+    }
+
+    return classnames(allClassNames);
+  }
+
   render() {
     const day = Utils.createDateFromEpochInIndiaTZ(this.props.forecastCurrentDay[0].dt);
     const summary = this.calcSummary();
 
-    const TagNameSingleDay = 'SingleDayForecast';
-
     return (
-      <div
+      <div className={this.calcMainTagClassnames()}>
-        className={
-          this.state.maximized ?
-            classnames([TagNameSingleDay, 'maximize']) :
-            classnames([TagNameSingleDay])
-        }
-      >
         <div className="SingleDayForecast-inner" onClick={this.minimizeIfAlreadyMaximized}>
           <div className="summary" onClick={this.maximizeIfAlreadyMinimized}>