幽灵资源网 Design By www.bzswh.com
animation动画
定义一个动画:
/*设置一个关键帧,定义动画每一步执行的动作*/ @keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: translate(200px,0);} 50%{transform: translate(200px,200px);} 75%{transform: translate(0,200px);} 100%{transform: translate(0,0);} }
/*引用关键帧,设置动画的执行样式*/ animation: mybox 5s 1s infinite;
注:
1、动画结束后回到初始位置。
2、from->0% to ->100%
animation-name: 动画的名字,(必须存在)
animation-duration: 动画持续的时间
animation-delay:规定多长时间后出现动画效果
animation-iteration-count: 定义动画执行的次数
默认值是:1; 无限次数:infinite
animation-timing-function: 定义动画的效果animation-fill-mode:
none:默认值; 样式在延迟之后生效;
backwards: 样式在延迟之前生效;
forwards: 在动画结束之后,停在终点位置;
both: 具备backwards和forwards的特性;
总结
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...