Анимация CSS левого и правого атрибутов в Internet Explorer 11 - PullRequest
Новая
       51

Анимация CSS левого и правого атрибутов в Internet Explorer 11

0 голосов
/ 30 января 2019

Я делал несколько CSS-анимаций для веб-сайта и хотел создать индикатор загрузки.Я смог создать this (ссылка jsfiddle) , используя absolute позиционированные ::before и ::after псевдоэлементы и анимируя, используя свойства left и right.Это выглядит идеально, и это именно то, что я хочу.Он отлично работает во всех протестированных браузерах, кроме (конечно) IE11 .По какой-то причине в IE11 анимация вообще не запускается animation in IE11

Из разных вещей, которые я пробовал, я понял, что по тем или иным причинам IE11 не поддерживает анимацию с использованием leftи right.Так что я надеюсь, что кто-то может помочь мне получить эту работу в IE11, возможно, используя какой-то другой подход к анимации, заставить его работать как есть или подтвердить, что это невозможно.

Пример кода jsfiddle может быть найдено здесь и я также опубликую его ниже. 

<div class="container">
  <div class="animated-divider"></div>
</div>

.container {
  width: 320px;
  height: 200px;
  background: #fff;
  border-radius: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.animated-divider {
    height: 2px;
    width: 100%;
    background: #d0d0d0;
    position: relative;
    top: 50%;

    &::before,
    &::after {
        content: '';
        display: block;
        position: absolute;
        height: inherit;
    }

    &::before {
        background-image: linear-gradient(to right, blue, lightgreen);
        animation: grow infinite 1.2s ease-out;
    }

    @keyframes grow {
        0% {
            left: 50%;
            right: 50%;
        }
        50% {
            left: 0%;
            right: 50%;
        }

        80% {
            left: 0%;
            right: 100%;
        }
    }

    &::after {
        background-image: linear-gradient(to right, lightgreen, blue);
        animation: grow-2 infinite 1.2s ease-out;
    }

    @keyframes grow-2 {
        0% {
            left: 50%;
            right: 50%;
        }
        50% {
            right: 0%;
            left: 50%;
        }

        80% {
            right: 0%;
            left: 100%;
        }
    }
}

Я надеюсь, что кто-то может помочь мне получить эту работу в IE11, возможно, используя какой-то другой подход к анимации, получая ееработать как есть или подтверждать, что это невозможно.

...