css动画效果之animation的常用样式
发布时间：2020-08-11 15:13:57 作者：zm_1688 
我要评论
我要评论这篇文章主要介绍了css动画效果之animation的常用样式，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
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的特性；
总结
到此这篇关于css动画效果之animation的常用样式的文章就介绍到这了,更多相关css animation的常用样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 这篇文章主要介绍了css常用样式font设置字体的多种变换,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-19
- 下面小编就为大家带来一篇浅谈html5标签css3的常用样式。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-20
- 下面小编就为大家带来一篇css 常用样式(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-11
- 这里我总结了一下平时自己在项目中经常用到的20个CSS常用的样式，都是些个人的经验，这里分享给大家，希望对大家有所帮助2014-09-02
- CSS常用样式包括定位、显示、宽高和剪裁等属性，这些都是我们大家经常使用到的，在本文做个总结，以备不时之需2014-04-18
这篇文章主要介绍了CSS常用样式之绘制双箭头的示例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-31
最新评论