动画、关键帧动画
一、动画:transition
1、动画过渡属性
CSS3的transition允许css的属性值在一定的时间区间内平滑的过渡
这种效果可以在鼠标单击、获得焦点、被点击、或对元素任何改变中触发,并圆滑的以动画效果改变css的属性值
transition: all 5s linear 3s
all === 单一属性:transition-property: 检索或设置对象中的,参与过渡的属性
可以替换成任意想要监控的属性(color,height等)
5s === 单一属性:transition-duration: 检索或设置对象,动画的持续时间
支持s或ms单位
linear 单一属性:transition-timing-function: 检索或设置对象中,过渡动画的类型
linear:匀速
3s === 单一属性:transition-delay: 检索或设置对象,延迟时间
支持s或ms单位
transition属性要写在盒子最开始的css属性里,监控盒子本身的属性值,不要写在hover之类的事件中
display: none/block 不支持动画过渡,因为display:none时就已经脱出文档流
需要支持显示与隐藏时使用visibility