码迷,mamicode.com
首页 > 其他好文 > 详细

动画属性的简单认识

时间:2017-07-27 00:51:15      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:关键词   语法   创建   整理   name   知识   dir   改变   bsp   

动画属性这一块掌握不是很熟练,将相关知识点整理到此处,知识点摘自W3school。

 @keyframes        规定动画
animation        所有动画属性的简写属性,除了animation-play-state属性
animation-name         规定@keyframes动画的名称
animation-duration        规定动画完成一个周期所花费的秒或毫秒
animation-timing-function        规定动画的速度曲线
animation-delay        规定动画何时开始
animation-iteration-count        规定动画被播放的次数
animation-direction            规定动画是否在下一周期逆向地播放
animation-play-state            规定动画是否正在运行或暂停
animation-fill-mode            规定对象动画时间之外的状态

通过@keyframes规则,创建动画,以百分比规定改变发生的时间,或者通过关键词“from”和“to”,等价于0%和100%,0%是动画开始的时间,100%是动画的结束时间。

 语法:@keyframes  animationname{
    keyframes-selector{css-styles;}
}

animation属性:
这是一个简写属性,用于设置六个动画属性:
animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

 

动画属性的简单认识

标签:关键词   语法   创建   整理   name   知识   dir   改变   bsp   

原文地址:http://www.cnblogs.com/zhangjiabin/p/7242561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!