1.使用脚本操作dom元素
在页面加载时，使用js控制dom的animation
setTimeout(function() {
$('.welcome').fadeOut(1000)
}, 5000)
setTimeout(function() {
$('.painted-scroll').css({ 'display': 'block'
})
$('.painted-scroll').find('span').animate({ 'left': '820px'
})
}, 5000)
setTimeout(function() {
$('.painted-scroll').fadeOut(1000)
}, 13000)2.使用css3的animation实现
两个动画通过动画延时属性，实现连续加载
/*小鱼*/
.welcome { background: rgba(255, 255, 255, 1); -webkit-animation: welcomeAnimation 5s linear; -moz-animation: welcomeAnimation 5s linear; -o-animation: welcomeAnimation 5s linear; -ms-animation: welcomeAnimation 5s linear; animation: welcomeAnimation 5s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@keyframes welcomeAnimation {
0% { opacity: 1; visibility: visible; -webkit-animation-timing-function: ease-in;
}
50% { opacity: 1; visibility: visible; -webkit-animation-timing-function: ease-in;
}
98% { opacity: 1; visibility: visible; -webkit-animation-timing-function: ease-in;
}
100% { opacity: 0; visibility: hidden; -webkit-animation-timing-function: ease-in;
}
} /*画轴*/
span { position: absolute; left: 80px; top: -13px; display: block; width: 800px; height: 540px; background: #ebe5d9 url('../img/scroll-right.jpg') no-repeat center left; -webkit-animation: imageAnimation 5s linear 6s; -moz-animation: imageAnimation 5s linear 6s; -o-animation: imageAnimation 5s linear 6s; -ms-animation: imageAnimation 5s linear 6s; animation: imageAnimation 5s linear 6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
@keyframes imageAnimation {
0% { left: 80px; -webkit-animation-timing-function: ease-in-out;
}
50% { left: 410px; -webkit-animation-timing-function: ease-in-out;
}
100% { left: 820px; -webkit-animation-timing-function: ease-in-out;
}
}20180809_111016 (1).gif
gif转换有点问题，效果不是很柔和
3.比较
两者都能实现类似效果，但是在css3动画中可以实现跟多的细节，通过transition-timing-function是不是可以做跟多的改变呢，现在流行的趋势中，mvvm的思想都是尽量不用dom操作，所以说将来的css3动画会右更多的发展空间
在现在流行的js库中，实现动画更多的使用的是css3的animation实现，还有浏览器对css3的支持度越来越高，在对比中提现css3将来的地位还是举足轻重的，
3.1swiper
image.png
3.2 bootstrap
image.png
作者：天天_哥
链接：https://www.jianshu.com/p/e66a06255e72