CSS анимация перевода в браузере сафари - PullRequest
Новая
       11

CSS анимация перевода в браузере сафари

0 голосов
/ 03 февраля 2019

У меня есть анимация CSS при наведении, которая ведет себя как анимация масштаба с преобразованием CSS, но я не использую масштаб, потому что в масштабе (1,5), например, текст и изображение bg становятся размытыми и теряют качество.

Таквместо того, чтобы использовать масштаб преобразования, я увеличиваю размер внутреннего поля до ширины: 130%, а также высоту до 130% при наведении курсора и использую перевод для центрирования его в меньшем блоке с использованием абсолютного положения.

Мой CSS: 

.items {
        margin: 0 -5px;
    }

    .item {
        width: 20%;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        position: relative;
        float: left;
        margin-bottom: 60px;
    }

    .item .wrapper {
        padding-top: 56.32%;
        display: block;
        position: relative;
        width: 100%;
    }

    .item .wrapper .inner-wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
    }

    .item .wrapper .inner-wrapper .content {
        display: block;
        margin: 0 5px;
        height: 100%;
        overflow: hidden;
    }

    .item .wrapper .overlay{
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 10px;
        z-index: 9;
    }


    .item:hover .inner-wrapper {
        width: 130%;
        height: 130%;
        left: 50%;
        top: 50%;
        -webkit-transform: translate3d(-50%,-50%,0);
        transform: translate3d(-50%,-50%,0);
        z-index: 999;
    }

вот полный рабочий пример: https://jsfiddle.net/exleedo/omkcqhzx/1/

Но эта анимация нервная и не плавная в сафари и IE.Есть ли способ сделать плавную анимацию в сафари такой же?

...