发表于: 2019-03-12 20:48:59
1 561
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
CSS3的@keyframes用法详解:
此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节。
一.基本知识:
keyframes翻译成中文,是"关键帧"的意思,如果用过flash应该对这个比较好理解,当然不会flash也没有任何问题。
使用transition属性也能够实现过渡动画效果,但是略显粗糙,因为不能够更为精细的控制动画过程,比如只能够在指定的时间段内总体控制某一属性的过渡,而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。
语法结构:
@keyframes animationname {keyframes-selector {css-styles;}}
参数解析:
1.animationname:声明动画的名称。
2.keyframes-selector:用来划分动画的时长,可以使用百分比形式,也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等价于 0% 和 100%。
建议始终使用百分比形式。
定义:
通过 @keyframes 规则,能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,可以多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,应始终定义 0% 和 100% 选择器。
重要:兼容问题!@keyfrmes 不兼容IE 9 and 以及更早版本的浏览器.
@keyframes与animation密切相关,如想透彻掌握,还需对照animation用法一起学习。
明天计划的事情:(一定要写非常细致的内容)
继续完成任务
遇到的问题:(遇到什么困难,怎么解决的)
暂无
收获:(通过今天的学习,学到了什么知识)
同今天完成的任务
评论