CSS3 масштабирование и анимация анимации на img

Я пытаюсь сделать анимацию CSS3, как в слайдере, присутствующем в this site.CSS3 масштабирование и анимация анимации на img

Я пытался использовать ниже CSS:

.animate-in{ 
    left: -20%; 
    opacity: 1; 
    top: 0; 
    z-index: 1; 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    -ms-transform: scale(1.2); 
    -o-transform: scale(1.2); 
    transform: scale(1.2); 
    -webkit-transition-property: left, -webkit-transform, opacity; 
    -moz-transition-property: left, transform, opacity; 
    -ms-transition-property: left, transform, opacity; 
    -o-transition-property: left, transform, opacity; 
    transition-property: left, transform, opacity; 
    -webkit-transition-duration: 10s, 15s, 2s; 
    -moz-transition-duration: 10s, 15s, 2s; 
    -ms-transition-duration: 10s, 15s, 2s; 
    -o-transition-duration: 10s, 15s, 2s; 
    transition-duration: 10s, 15s, 2s; 
    -webkit-transition-timing-function: linear; 
    -moz-transition-timing-function: linear; 
    -ms-transition-timing-function: linear; 
    -o-transition-timing-function: linear; 
    transition-timing-function: linear; 
    -webkit-transition-delay: 1s; 
    -moz-transition-delay: 1s; 
    -ms-transition-delay: 1s; 
    -o-transition-delay: 1s; 
    transition-delay: 1s; 
}

Но это CSS только сделал эффект масштабирования, и мне нужен эффект, который сделал ПОС замирания справа и слева, как в примере выше.

источник

2016-01-08 Doe

Одним из способов достижения требуемого масштабирования + выцветания и перехода от левой анимации было бы убедиться, что контейнер больше требуемого размера на n пикселей, а затем добавьте translateX(npx) также как часть стека transform.

Примечание:

Я использовал анимацию вместо переходов, поскольку анимации автоматически срабатывает тогда переход срабатывает только при изменении состояния.
Другим способом было бы оживить background-size и background-position, но в целом анимации, которые используют transform, считаются менее проблематичными с точки зрения производительности.

.anim { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: calc(100% + 100px); 
 
    background-image: url(http://lorempixel.com/1000/500/nature/2); 
 
    animation: zoom-move 15s linear infinite; 
 
} 
 
@keyframes zoom-move { 
 
    0% { 
 
    transform: scale(1) translateX(-100px); 
 
    opacity: 0.25; 
 
    } 
 
    13.33% { 
 
    opacity: 1; 
 
    /* make opacity change complete in 2s */ 
 
    } 
 
    66.66% { 
 
    transform: scale(1.13) translateX(0px); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: scale(1.2) translateX(0px); 
 
    opacity: 1; 
 
    } 
 
} 
 
body { 
 
    background-color: black; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class='anim'></div>

Или, иначе, Вы могли бы достичь это с помощью transform-origin вместе с transform (без добавления каких-либо translate).

.anim { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: calc(100% + 100px); 
 
    left: -100px; 
 
    background-image: url(http://lorempixel.com/1000/500/nature/2); 
 
    animation: zoom-move 15s linear infinite; 
 
} 
 
@keyframes zoom-move { 
 
    0% { 
 
    transform: scale(1); 
 
    transform-origin: -100px 50%; 
 
    opacity: 0.25; 
 
    } 
 
    13.33% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: scale(1.2); 
 
    transform-origin: -100px 50%; 
 
    opacity: 1; 
 
    } 
 
} 
 
body { 
 
    background-color: black; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class='anim'></div>

источник

2016-01-08 17:21:24 Harry

CSS3 масштабирование и анимация анимации на img

ответ

Смежные вопросы