CSS-анимация в IE не работает

Question

У меня есть прокручиваемый текстовый баннер с использованием html & css, он работает на Firefox & Chrome, но в IE 11, если он доходит до конца анимации 3-го элемента, тексты снова появляются центр и прокрутите неправильный путь.

Текст должен появляться по одному элементу за раз от righ отдельно, прокручивать до центра, ждать некоторое время, затем прокручивать влево, затем должен появиться следующий элемент. После последнего элемента анимация должна повторяться.

@-webkit-keyframes left-one { 
 
    0% { 
 
    -webkit-transform: translateX(100%); 
 
    } 
 
    5%,28% { 
 
    -webkit-transform: translateX(0); 
 
    } 
 
    33%,100% { 
 
    -webkit-transform: translateX(-100%); 
 
    } 
 
} 
 
@-webkit-keyframes left-two { 
 
    0%,33% { 
 
    -webkit-transform: translateX(100%); 
 
    } 
 
    38%,61% { 
 
    -webkit-transform: translateX(0); 
 
    } 
 
    66%,100% { 
 
    -webkit-transform: translateX(-100%); 
 
    } 
 
} 
 
@-webkit-keyframes left-three { 
 
    0%,66% { 
 
    -webkit-transform: translateX(100%); 
 
    } 
 
    71%,95% { 
 
    -webkit-transform: translateX(0); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(-100%); 
 
    } 
 
} 
 
/** Webkit Keyframes **/ 
 

 
@keyframes left-one { 
 
    0% { 
 
    transform: translateX(100%); 
 
    } 
 
    5%,28% { 
 
    transform: translateX(0); 
 
    } 
 
    33%,100% { 
 
    transform: translateX(-100%); 
 
    } 
 
} 
 
@keyframes left-two { 
 
    0%,33% { 
 
    transform: translateX(100%); 
 
    } 
 
    38%,61% { 
 
    transform: translateX(0); 
 
    } 
 
    66%,100% { 
 
    transform: translateX(-100%); 
 
    } 
 
} 
 
@keyframes left-three { 
 
    0%,66% { 
 
    transform: translateX(100%); 
 
    } 
 
    71%,95% { 
 
    transform: translateX(0); 
 
    } 
 
    100% { 
 
    transform: translateX(-100%); 
 
    } 
 
} 
 
.marquee { 
 
    width: 100%; 
 
    height: 30px; 
 
    margin: 0 auto; 
 
    margin-top: 1px; 
 
    margin-bottom: 2px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    background-color: #222; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -webkit-transition: background-color 350ms; 
 
    -moz-transition: background-color 350ms; 
 
    -o-transition: background-color 350ms; 
 
    -ms-transition: background-color 350ms; 
 
    transition: background-color 350ms; 
 
    background: -webkit-linear-gradient(left, rgba(32, 32, 32, 0), rgba(32, 32, 320, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0)); 
 
    /*Safari 5.1-6*/ 
 
    background: -o-linear-gradient(right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0)); 
 
    /*Opera 11.1-12*/ 
 
    background: -moz-linear-gradient(right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0)); 
 
    /*Fx 3.6-15*/ 
 
    background: -ms-linear-gradient(right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0)); 
 
    /*IE*/ 
 
    background: linear-gradient(to right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0)); 
 
    /*Standard*/ 
 
} 
 
.marquee p { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    line-height: 28px; 
 
    text-align: center; 
 
    color: #FCCC0C; 
 
    filter: dropshadow(color=#000000, offx=1, offy=1); 
 
    text-shadow: 0px 0px 1px #FCCC0C; 
 
    transform: translateX(100%); 
 
    -webkit-transform: translateX(100%); 
 
} 
 
.marquee p:nth-child(1) { 
 
    animation: left-one 15s ease infinite; 
 
    -webkit-animation: left-one 15s ease infinite; 
 
} 
 
.marquee p:nth-child(2) { 
 
    animation: left-two 15s ease infinite; 
 
    -webkit-animation: left-two 15s ease infinite; 
 
} 
 
.marquee p:nth-child(3) { 
 
    animation: left-three 15s ease infinite; 
 
    -webkit-animation: left-three 15s ease infinite; 
 
}

<div class="marquee"> 
 
    <p><a>1. Text to scroll item.</a> 
 
    </p> 
 
    <p><a>2 Second scroll text,</a> 
 
    </p> 
 
    <p><a>3 Final text item for scrolling,</a> 
 
    </p> 
 
</div>

Answer 1

Я думаю, что проблема имеет что-то делать с ключевыми кадрами на уровне 0% и IE делает что-то смешное о том, где он начинает анимацию. Я имею в виду, когда вы смотрите на свой код, похоже, что текст смещается вправо на втором ключевом кадре вместо 0%.

В любом случае, вот какой код это исправляет.

Решение 1: Измените свой 0% на 0.001%, и это исправит его.

Решение 2. Возможно, лучше просто написать одну анимацию и добавить задержку на каждый бит текста. Here is a codepen for it

@-webkit-keyframes left-one { 
    0% { 
    -webkit-transform: translateX(100%); 
    } 
    20%,33% { 
    -webkit-transform: translateX(0); 
    } 
    50%,100% { 
    -webkit-transform: translateX(-100%); 
    } 
} 

/** Webkit Keyframes **/ 

@keyframes left-one { 
    0% { 
    transform: translateX(100%); 
    } 
    20%,33% { 
    transform: translateX(0); 
    } 
    50%,100% { 
    transform: translateX(-100%); 
    } 
} 

.marquee p:nth-child(1) { 
    animation: left-one 15s ease infinite; 
    -webkit-animation: left-one 15s ease infinite; 
} 
.marquee p:nth-child(2) { 
    animation: left-one 15s ease 5s infinite; // delay of 5s 
    -webkit-animation: left-one 15s ease 5s infinite; 
} 
.marquee p:nth-child(3) { 
    animation: left-one 15s ease 10s infinite; // delay of 10s 
    -webkit-animation: left-one 15s ease 10s infinite; 
}