Дмитрий

вот это событие подойдет ?
https://www.w3schools.com/tags/av_event_loadeddata.asp

все правильно вы гоняете translateX или в плюс или в минус. что бы было по кругу, надо к предыдущему изменению прибавлять/вычитать новое. т.е. прежде чем сдвинуть на -300 узнайте на сколько он уже сдвинут и вычтете еще 300 и в результате надо сдвинуть для второго шага на -600px, для 3 на -900px и т.д.

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var TextScramble = function () {
    function TextScramble(el) {
        _classCallCheck(this, TextScramble);

        this.el = el;
        this.chars = '1234567890';
        this.update = this.update.bind(this);
    }

    _createClass(TextScramble, [{
        key: 'setText',
        value: function setText(newText) {
            var _this = this;

            var oldText = this.el.innerText;
            var length = Math.max(oldText.length, newText.length);
            var promise = new Promise(function (resolve) {
                return _this.resolve = resolve;
            });
            this.queue = [];
            for (var i = 0; i < length; i++) {
                var from = oldText[i] || '';
                var to = newText[i] || '';
                var start = Math.floor(Math.random() * 50);
                var end = start + Math.floor(Math.random() * 50);
                this.queue.push({ from: from, to: to, start: start, end: end });
            }
            cancelAnimationFrame(this.frameRequest);
            this.frame = 0;
            this.update();
            return promise;
        }
    }, {
        key: 'update',
        value: function update() {
            var output = '';
            var complete = 0;
            for (var i = 0, n = this.queue.length; i < n; i++) {
                var _queue$i = this.queue[i];
                var from = _queue$i.from;
                var to = _queue$i.to;
                var start = _queue$i.start;
                var end = _queue$i.end;
                var char = _queue$i.char;

                if (this.frame >= end) {
                    complete++;
                    output += to;
                } else if (this.frame >= start) {
                    if (!char || Math.random() < 5) {
                        char = this.randomChar();
                        this.queue[i].char = char;
                    }
                    output += '<span class="dud">' + char + '</span>';
                } else {
                    output += from;
                }
            }
            this.el.innerHTML = output;
            if (complete === this.queue.length) {
                this.resolve();
            } else {
                this.frameRequest = requestAnimationFrame(this.update);
                this.frame++;
            }
        }
    }, {
        key: 'randomChar',
        value: function randomChar() {
            return this.chars[Math.floor(Math.random() * this.chars.length)];
        }
    }]);

    return TextScramble;
}();

var phrases = ['Сначала появляется этот', 'Потом этот', 'Все с эффектами', 'И очень круто'];

var el = document.querySelector('.text');
var fx = new TextScramble(el);

var counter = 0;
var next = function next() {
    fx.setText(phrases[counter]).then(function () {
        setTimeout(next, 2000);
    });
    counter = (counter + 1) % phrases.length;
};

next();

странно что работает в хроме, forEach только для массивов, а массив это не коллекция (то что вы получаете через querySelectorAll). Можно заставить путем заимствования метода работать и на коллекциях foreach.
А так Вячеслав Лебедев правильно советует, если только в учебных целях так навешивать обработчики

.product-thumb .image img:hover {
-webkit-filter: hue-rotate(333deg);
}

stylesheet.css 699