diff --git a/index.html b/index.html
index 6546475..355cf3a 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,45 @@ <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 hide" id="heartBeatingBlock" 
+            style="background-color: #8d3f8d; border: 2px solid #421456">
+        </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..0f5645b 100644
--- a/index.js
+++ b/index.js
@@ -1,56 +1,198 @@
 addListeners();
 
+
 function addListeners() {
     document.getElementById('fadeInPlay')
         .addEventListener('click', function () {
             const block = document.getElementById('fadeInBlock');
-            fadeIn(block, 5000);
+            animaster().addFadeIn(2500).play(block);
+        });
+
+    document.getElementById('fadeOutPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('fadeOutBlock');
+            animaster().addFadeOut(2500).play(block);
         });
 
     document.getElementById('movePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('moveBlock');
-            move(block, 1000, {x: 100, y: 10});
+            animaster().addMove(2500, { x: 100, y: 10 }).play(block);
         });
 
     document.getElementById('scalePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('scaleBlock');
-            scale(block, 1000, 1.25);
+            animaster().addScale(2500, 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');
-}
 
-/**
- * Функция, передвигающая элемент
- * @param element — HTMLElement, который надо анимировать
- * @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(2500, { x: 100, y: 20 })
+                .addFadeOut(2500)
+                .play(block);
+        });
+
+    document.getElementById('heartBeatingPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('heartBeatingBlock');
+            animaster().fadeIn(block, 2500);
+            let heartBeatingStop = animaster().heartBeating(block, 2500);
+            document
+                .getElementById("heartBeatingStop")
+                .addEventListener("click", heartBeatingStop.stop);
+
+        });
+
+    document.getElementById('showAndHidePlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('showAndHideBlock');
+            animaster()
+                .addFadeIn(2500)
+                .addDelay(2500)
+                .addFadeOut(2500)
+                .play(block);
+        });
+
+
+    document.getElementById('moveAndHideReset')
+        .addEventListener('click', function () {
+            const block = document.getElementById('moveAndHideBlock');
+            animaster().resetMoveAndHide(block);
+        });
+
+    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);
+        });
 }
 
-/**
- * Функция, увеличивающая/уменьшающая элемент
- * @param element — HTMLElement, который надо анимировать
- * @param duration — Продолжительность анимации в миллисекундах
- * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
- */
-function scale(element, duration, ratio) {
-    element.style.transitionDuration =  `${duration}ms`;
-    element.style.transform = getTransform(null, ratio);
+
+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 * (1 / 3));
+            setTimeout(() => this.fadeOut(element, duration * (1 / 3)), duration * (1 / 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);
+                }
+            };
+        },
+
+        resetFadeIn(element) {
+            element.style.transitionDuration = null;
+            element.classList.remove('show');
+            element.classList.add('hide');
+        },
+
+        resetMoveAndHide(element) {
+            element.style.transitionDuration = null;
+            element.style.transform = null;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+
+        resetFadeOut(element) {
+            element.style.transitionDuration = null;
+            element.classList.remove('hide');
+            element.classList.add('show');
+        },
+
+        addMove(duration, translation) {
+            return this.addAnimation('move', duration, translation);
+        },
+
+        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);
+        },
+
+        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;
+            }
+        },
+
+        wait(duration) {
+            setTimeout(duration);
+        },
+        
+        addAnimation(animation, duration, ...other) {
+            steps.push({
+                animation,
+                duration,
+                other
+            });
+            return this;
+        }
+    }
 }
 
 function getTransform(translation, ratio) {
@@ -62,4 +204,4 @@ function getTransform(translation, ratio) {
         result.push(`scale(${ratio})`);
     }
     return result.join(' ');
-}
+}
\ No newline at end of file