目前网站开发趋势,安徽省交通运输厅秦勤,盘州网站建设,这几年做哪个网站致富animate.css
animate.css是一个动画库#xff0c;可以方便快速的制作出常见的动画效果#xff0c;很适合强调#xff0c;主页#xff0c;滑块和注意力引导提示。
它预设了弹跳#xff08;bounce#xff09;#xff0c;摇摆#xff08;swing#xff09;#xff0c;颤…animate.css
animate.css是一个动画库可以方便快速的制作出常见的动画效果很适合强调主页滑块和注意力引导提示。
它预设了弹跳bounce摇摆swing颤抖wobble抖动shake闪烁flash翻转flip旋转rotate淡入淡出fade滑动sliding光速lightspeed缩放变焦zoom翻滚roll等动画效果。
基础用法
先下载引入animate.css然后给盒子加上类名例如animated swing
animated类似于全局变量它定义了动画的持续时间默认1sswing是动画具体的动画效果的名称可以选择任意的效果
首先要有一个基础类“animated”然后再加一个动画类同时使用过渡和动画
keyframes关键帧
可能会觉得对于“延迟开始”和“提前结束”这两种需求是完全可以通过定义延迟时间以及动画周期的时间来达到相同的效果的但是对于一个无限循环的动效而言延迟开始永远只作用一次当动画一旦开始进入周而复始的循环后不再支持这个属性设置。因此如果可以的话尽量用关键帧的定义来完成。
transition组件
当元素被transition包裹之后vue会自动分析被包裹的元素的css样式fade-enter、fade-enter-active然后构建一个动画过程。
当动画开始执行的瞬间会增加两个样式当动画第一帧结束开始第二帧的时候会移除样式1同时加上样式2在动画执行的最后会将两个样式都移除。
延时执行
配置类名 delay-2s: 2秒后再执行动画 delay-3s: 3秒后再执行动画 delay-4s: 4秒后再执行动画 delay-5s: 5秒后再执行动画 执行时长 slow: 用2秒执行完动画 slower: 用3秒执行完动画 fast: 用0.8秒执行完动画 faster: 用0.5秒执行完动画 无限重复执行动画 infinite js控制
如果不是出现在页面时就马上执行的动画效果而是通过点击事件触发的也可以使用js的时间监听 animationend: 当css3动画结束后是一个事件类似于onclick addEventListener事件监听
