diff --git a/index.html b/index.html
index 6546475..42fb042 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,109 @@ <h3 class="animation-name">scale</h3>
         <div class="block" id="scaleBlock"></div>
     </div>
 
+<div class="container">
+    <header class="container-header">
+        <h3 class="animation-name">fadeIn</h3>
+        <button class="button" id="fadeInPlay">Play</button>
+    </header>
+    <div class="block hide" id="fadeInBlock"></div>
+</div>
+<div class="container">
+    <header class="container-header">
+        <h3 class="animation-name">move</h3>
+        <button class="button" id="movePlay">Play</button>
+    </header>
+    <div class="block" id="moveBlock"></div>
+</div>
+<div class="container">
+    <header class="container-header">
+        <h3 class="animation-name">scale</h3>
+        <button class="button" id="scalePlay">Play</button>
+    </header>
+    <div class="block" id="scaleBlock"></div>
+</div>
+
+
     <script src="index.js"></script>
+
+<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" ></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>
+
+<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" ></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..568c005 100644
--- a/index.js
+++ b/index.js
@@ -5,18 +5,36 @@ function addListeners() {
         .addEventListener('click', function () {
             const block = document.getElementById('fadeInBlock');
             fadeIn(block, 5000);
+            animaster().fadeIn(block, 5000);
+        });
+    document.getElementById('fadeOutPlay')
+        .addEventListener('click', function () {
+            const block = document.getElementById('fadeOutBlock');
+            animaster().fadeOut(block, 5000);
         });
 
     document.getElementById('movePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('moveBlock');
             move(block, 1000, {x: 100, y: 10});
+            animaster().move(block, 1000, {x: 100, y: 10});
         });
 
     document.getElementById('scalePlay')
         .addEventListener('click', function () {
             const block = document.getElementById('scaleBlock');
             scale(block, 1000, 1.25);
+            animaster().scale(block, 1000, 1.25);
+        });
+    document.getElementById('moveAndHide')
+        .addEventListener('click', function () {
+            const block = document.getElementById('moveAndHideBlock');
+            animaster().moveAndHide(block, 2000, {x: 100, y: 20});
+        });
+    document.getElementById('showAndHide')
+        .addEventListener('click', function () {
+            const block = document.getElementById('showAndHideBlock');
+            animaster().showAndHide(block, 2000);
         });
 }
 
@@ -29,7 +47,47 @@ function fadeIn(element, duration) {
     element.style.transitionDuration =  `${duration}ms`;
     element.classList.remove('hide');
     element.classList.add('show');
+    document.getElementById('heartBeating')
+        .addEventListener('click', function () {
+            const block = document.getElementById('heartBeatingBlock');
+            animaster().heartBeating(block);
+        });
 }
+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');
+        animaster().fadeIn(block, 1000);
+        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);
+    });
 
 /**
  * Функция, передвигающая элемент
@@ -63,3 +121,134 @@ function getTransform(translation, ratio) {
     }
     return result.join(' ');
 }
+function animaster(){
+    this.steps = [];
+    return {
+        /**
+         * Блок плавно появляется из прозрачного.
+         * @param element — HTMLElement, который надо анимировать
+         * @param duration — Продолжительность анимации в миллисекундах
+         */
+        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, обозначающими смещение блока
+         */
+        move(element, duration, translation) {
+            element.style.transitionDuration = `${duration}ms`;
+            element.style.transform = getTransform(translation, null);
+        },
+
+        /**
+         * Функция, увеличивающая/уменьшающая элемент
+         * @param element — HTMLElement, который надо анимировать
+         * @param duration — Продолжительность анимации в миллисекундах
+         * @param ratio — во сколько раз увеличить/уменьшить. Чтобы уменьшить, нужно передать значение меньше 1
+         */
+        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) {
+        move(element, 2 * duration / 5, {x: 100, y: 20});
+        setTimeout(() => fadeOut(element, 3 * duration / 5), 2 * duration / 5);
+        },
+
+        showAndHide(element, duration) {
+        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