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只取得变焦效果，我需要从右取得PIC褪色，离开像上面例子中的效果。

来源

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

回答

相关问题