diff --git a/index.html b/index.html
index 6546475..d6c18c6 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,44 @@ <h3 class="animation-name">scale</h3>
         </header>
         <div class="block" id="scaleBlock"></div>
     </div>
-
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">fadeOut</h3>
+            <button class="button" id="fadeOutPlay">Play</button>
+        </header>
+        <div class="block" id="fadeOutBlock"></div>
+    </div>
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">moveAndHide</h3>
+            <button class="button" id="moveAndHidePlay">Play</button>
+            <button class="button" id="moveAndHideReset">Reset</button>
+        </header>
+        <div class="block" id="moveAndHideBlock"></div>
+    </div>
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">showAndHide</h3>
+            <button class="button" id="showAndHidePlay">Play</button>
+        </header>
+        <div class="block hide" id="showAndHideBlock"></div>
+    </div>
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">heartBeating</h3>
+            <button class="button" id="heartBeatingPlay">Play</button>
+            <button class="button" id="heartBeatingStop">Stop</button>
+        </header>
+        <div class="block" id="heartBeatingBlock">
+        </div>
+    </div>
+    <div class="container">
+        <header class="container-header">
+            <h3 class="animation-name">customAnimation</h3>
+            <button class="button" id="customAnimation">Play</button>
+        </header>
+        <div class="block" id="customAnimationBlock"></div>
+    </div>
     <script src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 61e55f6..2c5210b 100644
--- a/index.js
+++ b/index.js
@@ -4,32 +4,32 @@ function addListeners() {
     document.getElementById('fadeInPlay')
         .addEventListener('click', function () {
             const block = document.getElementById('fadeInBlock');
-            fadeIn(block, 5000);
+            animaster().addFadeIn(5000).play(block);
         });
 
     document.getElementById('movePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('moveBlock');
-            move(block, 1000, {x: 100, y: 10});
+            animaster().addMove(1000, {x: 100, y: 10}).play(block);
         });
 
     document.getElementById('scalePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('scaleBlock');
-            scale(block, 1000, 1.25);
+            animaster().addScale(1000, 1.25).play(block);
         });
-}
+
 
 /**
  * Блок плавно появляется из прозрачного.
  * @param element — HTMLElement, который надо анимировать
  * @param duration — Продолжительность анимации в миллисекундах
  */
-function fadeIn(element, duration) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.classList.remove('hide');
-    element.classList.add('show');
-}
+    document.getElementById('fadeOutPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('fadeOutBlock');
+            animaster().addFadeOut(5000).play(block);
+        });
 
 /**
  * Функция, передвигающая элемент
@@ -37,10 +37,40 @@ function fadeIn(element, duration) {
  * @param duration — Продолжительность анимации в миллисекундах
  * @param translation — объект с полями x и y, обозначающими смещение блока
  */
-function move(element, duration, translation) {
-    element.style.transitionDuration = `${duration}ms`;
-    element.style.transform = getTransform(translation, null);
-}
+    document.getElementById('moveAndHidePlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('moveAndHideBlock');
+            animaster()
+                .addMove(2000, {x: 100, y: 20})
+                .addFadeOut(3000)
+                .play(block);
+        });
+
+    document.getElementById('showAndHidePlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('showAndHideBlock');
+            animaster()
+                .addFadeIn(5000 / 3)
+                .addDelay(5000 / 3)
+                .addFadeOut(5000 / 3)
+                .play(block);
+        });
+
+    document.getElementById('heartBeatingPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('heartBeatingBlock'); 
+            let heartBeatingStop = animaster().heartBeating(block, 1000);
+            document
+            .getElementById("heartBeatingStop")
+            .addEventListener("click", heartBeatingStop.stop);
+
+        });
+
+    document.getElementById('moveAndHideReset')
+        .addEventListener('click', function () {
+            const block = document.getElementById('moveAndHideBlock');
+            animaster().resetMoveAndHide(block);
+        });
 
 /**
  * Функция, увеличивающая/уменьшающая элемент
@@ -48,9 +78,20 @@ function move(element, duration, translation) {
  * @param duration — Продолжительность анимации в миллисекундах
  * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
  */
-function scale(element, duration, ratio) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.style.transform = getTransform(null, ratio);
+    document.getElementById('customAnimation')
+        .addEventListener('click', function () {
+            const block = document.getElementById('customAnimationBlock');
+            const customAnimation = animaster()
+                .addMove(200, {x: 40, y: 40})
+                .addScale(800, 1.3)
+                .addMove(200, {x: 80, y: 0})
+                .addScale(800, 1)
+                .addMove(200, {x: 40, y: -40})
+                .addScale(800, 0.7)
+                .addMove(200, {x: 0, y: 0})
+                .addScale(800, 1);
+            customAnimation.play(block);
+        });
 }
 
 function getTransform(translation, ratio) {
@@ -63,3 +104,117 @@ function getTransform(translation, ratio) {
     }
     return result.join(' ');
 }
+
+function animaster() {
+    this.steps = [];
+    return {
+        fadeIn(element, duration) {
+            element.style.transitionDuration =  `${duration}ms`;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+
+        move(element, duration, translation) {
+            element.style.transitionDuration = `${duration}ms`;
+            element.style.transform = getTransform(translation, null);
+        },
+
+        scale(element, duration, ratio) {
+            element.style.transitionDuration =  `${duration}ms`;
+            element.style.transform = getTransform(null, ratio);
+        },
+
+        fadeOut(element, duration) {
+            element.style.transitionDuration =  `${duration}ms`;
+            element.classList.remove('show');
+            element.classList.add('hide');
+        },
+
+        moveAndHide(element, duration, translation) {
+            this.move(element, duration * 2 / 5, translation);
+            this.fadeOut(element, duration * 3 / 5);
+        },
+
+        showAndHide(element, duration) {
+            this.fadeIn(element, duration / 3);
+            setTimeout(() => this.fadeOut(element, duration / 3), duration / 3);
+        },
+
+        heartBeating(element, duration) {
+            let beat = () => {
+              this.scale(element, duration / 2, 1.4);
+              setTimeout(() => this.scale(element, duration / 2, 1), duration / 2);
+            };
+            let beating = setInterval(beat, duration);
+
+            return {
+                stop() {
+                    clearInterval(beating);
+                }
+            };
+        },
+
+        wait(duration) {
+            setTimeout(duration);
+        },
+
+        resetFadeIn(element) {
+            element.style.transitionDuration =  null;
+            element.classList.remove('show');
+            element.classList.add('hide');
+        },
+
+        resetFadeOut(element) {
+            element.style.transitionDuration =  null;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+
+        resetMoveAndHide(element) {
+            element.style.transitionDuration = null;
+            element.style.transform = null;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+
+        addMove(duration, translation) {
+            return this.addAnimation('move', duration, translation);
+        },
+
+        play(element, cycled = false) {
+            let sum = 0;
+            for (let step of steps) {
+                setTimeout(
+                    () => this[step.animation](element, step.duration, ...step.other),
+                    sum
+                );
+                sum += step.duration;
+            }
+        },
+
+        addScale(duration, ratio) {
+            return this.addAnimation('scale', duration, ratio);
+        },
+
+        addFadeIn(duration) {
+            return this.addAnimation('fadeIn', duration);
+        },
+
+        addFadeOut(duration) {
+            return this.addAnimation('fadeOut', duration);
+        },
+
+        addDelay(duration) {
+            return this.addAnimation('wait', duration);
+        },
+
+        addAnimation(animation, duration, ...other) {
+            steps.push({
+                animation,
+                duration,
+                other
+            });
+            return this;
+        }
+    }
+}
\ No newline at end of file