526互联

前端H5之CSS动画效果

发布时间 2024-01-09 17:21:27作者: Veyron16

支持效果如下：

进入

淡入：fadeIn

翻转进入：flipInY

中心弹入：bounceIn

中心放大：zoomIn

翻转进入：rollIn

光速进入：lightSpeedIn

移入，从左向右：fadeInLeft

移入，从上向下：fadeInDown

移入，从右向左：fadeInRight

移入，从下向上：fadeInUp

弹入，从左向右：bounceInLeft

弹入，从上向下：bounceInDown

弹入，从右向左：bounceInRight

弹入，从下向上：bounceInUp

==强调

摇摆：wobble

抖动：rubberBand

旋转：rotateIn

翻转：flip

悬摆：swing

放大抖动：tada

倾斜摆动：jello

=退出===

淡出：fadeOut

翻转消失：flipOutY

中心消失：bounceOut

翻滚退出：rollOut

光速退出：lightSpeedOut

使用示例：

重磅推荐

{novel id="novel" limit="6"}

{$novel['title']}

{/novel}

使用教程：

在需要展示动画的标签中加入如下：

style="-webkit-animation: fadeInLeft 1s ease 0.3s 1 both;"

例如：

解释：

fadeInLeft 特效名称

1s特效展示的时间

只需要修改这两个地方就可以了。