css动画执行保持forwards,使用CSS3 animation-fill-mode: forwards实现的渐变填充图片转场效果...

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

overflow: hidden;

background: #eee;

}

@keyframes animateSlides {

0% {

width: 0;

}

100% {

width: 100%;

}

}

#slider {

width: 467px;

height: 350px;

border-radius: 3px;

border: 1px solid rgba(0, 0, 0, 0.05);

box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

margin: 0 auto;

position: relative;

top: 50%;

transform: translateY(-50%);

background: rgba(0, 0, 0, 0.5);

overflow: hidden;

}

#slider .slide-1,

#slider .slide-2,

#slider .slide-3 {

width: 0;

height: 100%;

position: absolute;

top: 0;

left: 0;

right: auto;

bottom: auto;

background-color: transparent;

background-repeat: no-repeat;

background-position: left center;

/* Fallback */

background-size: auto 100%;

transition: all 0.3s ease-in-out;

}

#slider .slide-1 {

width: 100%;

z-index: 1;

background-image: url(/uploads/141102/tumblr_1.jpg);

animation-delay: 0;

}

#slider .slide-2 {

z-index: 2;

background-image: url(/uploads/141102/tumblr_2.jpg);

animation: animateSlides 3s linear;

animation-delay: 3s;

}

#slider .slide-3 {

z-index: 3;

background-image: url(/uploads/141102/tumblr_1.jpg);

animation: animateSlides 3s linear;

animation-delay: 9s;

}