需求:
元素从右向左渐变滑入,然后再上下漂浮
代码实现:
animation动画可连写
<style lang="less" scoped>
//swipe-item里面所有animate动画延迟时间
@swipe-animation-delay:500ms;
//animate.css动画时长
@animate-css-duration:800ms;
//漂浮动画延迟时间
@float-delay:@swipe-animation-delay + @animate-css-duration;
@keyframes float {
0%{
transform: translateY(0px);
}
100%{
transform: translateY(-25px);
}
}
.img1-upToDown{
animation:fadeInRight linear both @animate-css-duration @swipe-animation-delay ,float 800ms infinite linear @float-delay alternate;
}
//alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
</style>
分享一个animate.css
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。