CSS3 zoom and move animation effect on img

问题

I'm trying to make CSS3 animation like in the slider present in this site.

I have tried to use the below 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;
}

But this CSS only made the zoom effect and I need the effect that made pic fade from right and left like the example above.

回答1:

One way to achieve the required zoom + fade and move from left animation would be to make sure that the container is larger than the required size by n pixels and then add translateX(npx) also as part of the transform stack.

Note:

I have used animations instead of transitions because animations are auto-triggered whereas transition is triggered only upon state change.
Another way would be to animate the background-size and background-position but generally the animations that use transform are considered to be less problematic in terms of performance.

.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>

Or, another way you could achieve it is by using transform-origin along with transform (without adding any 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>

来源：https://stackoverflow.com/questions/34678795/css3-zoom-and-move-animation-effect-on-img

标签

jquery

css

css3

css-animations