style: 심장박동 애니메이션

src/app/animation/animation.component.html

@@ -1,6 +1,7 @@
 <ul>
     <li><a routerLink="animation-basic">basic</a></li>
-    <li><a routerLink="balloon">ballon</a></li>
+    <li><a routerLink="balloon">balloon</a></li>
+    <li><a routerLink="heartbeat">heart-beat</a></li>
     <li><a routerLink="coin">coin</a></li>
     <li><a routerLink="shaking">shaking</a></li>
     <li><a routerLink="racing">racing</a></li>

src/app/animation/heartbeat/heartbeat.component.html

@@ -0,0 +1,5 @@
+<div class="container">
+    <div class="heart">
+
+    </div>
+</div>

src/app/animation/heartbeat/heartbeat.component.scss

@@ -0,0 +1,50 @@
+.container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Lato', sans-serif;
+    background-color: #272727;
+
+    .heart {
+        width: 100px;
+        height: 100px;
+        position: relative;
+        background-color: #ff3838;
+        transform: rotate(45deg);
+        animation: heart-beat 2s linear infinite;
+    }
+
+    .heart:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #ff3838;
+        transform: translateY(-50%);
+        border-radius: 50%;
+    }
+
+    .heart:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #ff3838;
+        transform: translateX(-50%);
+        border-radius: 50%;
+    }
+}
+
+@keyframes heart-beat {
+    0% { transform: rotate(45deg) scale(1); }
+    25% { transform: rotate(45deg) scale(0.9); }
+    30% { transform: rotate(45deg) scale(0.75); }
+    50% { transform: rotate(45deg) scale(1); }
+    70% { transform: rotate(45deg) scale(1.25); }
+    100% { transform: rotate(45deg) scale(1); }
+}

src/app/animation/heartbeat/heartbeat.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeartbeatComponent } from './heartbeat.component';
+
+describe('HeartbeatComponent', () => {
+  let component: HeartbeatComponent;
+  let fixture: ComponentFixture<HeartbeatComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeartbeatComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeartbeatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/animation/heartbeat/heartbeat.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-heartbeat',
+  templateUrl: './heartbeat.component.html',
+  styleUrls: ['./heartbeat.component.scss']
+})
+export class HeartbeatComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/app-routing.module.ts

@@ -17,6 +17,7 @@ import { FallComponent } from './animation/fall/fall.component';
 import { ShakingComponent } from './animation/shaking/shaking.component';
 import { BlingComponent } from './animation/bling/bling.component';
 import { LightingComponent } from './animation/lighting/lighting.component';
+import { HeartbeatComponent } from './animation/heartbeat/heartbeat.component';
 
 
 const routes: Routes = [
@@ -36,6 +37,7 @@ const routes: Routes = [
       { path: '', component: AnimationBasicComponent },
       { path: 'animation-basic', component: AnimationBasicComponent },
       { path: 'balloon', component: BalloonComponent },
+      { path: 'heartbeat', component: HeartbeatComponent },
       { path: 'coin', component: CoinComponent },
       { path: 'shaking', component: ShakingComponent },
       { path: 'racing', component: RacingComponent },

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { FallComponent } from './animation/fall/fall.component';
 import { ShakingComponent } from './animation/shaking/shaking.component';
 import { BlingComponent } from './animation/bling/bling.component';
 import { LightingComponent } from './animation/lighting/lighting.component';
+import { HeartbeatComponent } from './animation/heartbeat/heartbeat.component';
 
 @NgModule({
   declarations: [
@@ -45,7 +46,8 @@ import { LightingComponent } from './animation/lighting/lighting.component';
     FallComponent,
     ShakingComponent,
     BlingComponent,
-    LightingComponent
+    LightingComponent,
+    HeartbeatComponent
   ],
   imports: [
     BrowserModule,