标签：动画 结束 100% animation 0% animate CSS 延迟

animation动画
　　 animation-name:　　　　　　         设置动画的名字（自定义）
　　animation-duration:　　　　　　　　   动画的持续时间
　　animation-delay:　　　　　　　　　　动画的延迟时间
　　animation-iteration-count:　　　　动画的重复次数，默认为1，infinite无限次
　　animation-timing-function:　　　　　　动画的运动形式

　　复合写法：animation:name duration delay iteration-count timing-function
　　注:

　　　　1、运动结束后，默认会停留在起始位置
　　　　2、起始：from <=> 0%
　　　　结束：to <=> 100%

　　animation-fill-mode: 　　　　　　规定动画播放之前或之后是否可见，其动画效果是否可见
　　　　none(默认值)：　　　　　　在运动结束之后回到初始位置在延迟的情况下，让0%在延迟后生效
　　　　backwards:　　　　　　　　在延迟的情况下，让0%在延迟之前生效
　　　　forwards:　　　　　　　　　在运动结束的之后，停到结束的位置。
　　　　both:　　　　　　　　　　　backwards和forwards同时生效。

　　animation-direction: 　　　　　　属性定义是否应该轮流反向播放动画
　　　　alternate: 　　　　　　　　　　一次正向(0%-100%),一次反向(100%-0%)
　　　　reverse:　　　　　　　　　　　　永远反向，从100%-0%
　　　　normal:　　　　　　　　　　　　永远正向（默认值），从0%-100%

　　animate.css 预设css3动画库
　　　　基本使用：
　　　　　　animated:基类(基础的样式，每个动画效果都要加)
　　　　　　infinite 无限次循环

标签：动画,结束,100%,animation,0%,animate,CSS,延迟
来源： https://www.cnblogs.com/lsm-boke/p/14384535.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。