需求:
元素从右向左渐变滑入,然后再上下漂浮
代码实现:
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集合,里面预设了很多种常用的动画,且使用非常简单。