CSS过渡 学习打卡
简介:通过CSS3属性变化实现动画,产生交互
过渡
1、控制css样式变化的过程
2、过渡 – transition
允许css属性值在一定的时间区间内平滑的过渡(动画形成的过程)
在鼠标点击,获得焦点,被单击或者对元素任何改变中触发并圆滑的以动画效果改变css属性值
3、兼容性:ie10+ firefox16+ chrome26+ safari6.1+ opera12.1+
总结:过渡就是一个元素,他的属性从一个值变化到另一个值。
transition-property属性
1、检索或者设置对象中的参与过渡的属性 – 指的就是要过渡到哪一个属性
2、语法:none | all | property
none 没有属性变化
all 所有属性都会改变 – 默认值
property 元素属性名
transition-duration属性
1、检索或者设置对象过渡的持续时间
2、语法: time
3、参数说明:
规定完成或者效果完成所需要的花费的时间(s ms)
默认值:0
不同的过渡曲线有不同的过渡效果,以下四种(过渡时间:2s):
1.慢 - 快 - 慢 2.快 - 慢 3.慢 - 快 4.匀速
transition-timing-function属性:
1、检索或者设置对象中的过渡的动画类型
2、语法:
(1)ease 平滑过渡 等同于贝赛尔曲线(0.25 0.1 0.25 1.0)开头和结尾比较平滑,但是最后相对较快!
(2)linear 线性过渡 等同于贝塞尔曲线(0.0 0.0 1.0 1.0) 突然开始,中间匀速,再次突然停止
(3)ease-in 由慢到快
(4)ease-out 由快到慢
(5)ease-in-out 慢-快-慢 建议使用
(6)step-start 一帧一帧设置
(7)step-end
(8)step<angle>[start|end]
transition-delay属性
1、检索或者设置对象延迟过渡的时间 – 过渡的属性是立刻执行还是延迟执行
2、语法:time
3、参数说明:
(1)指定秒或者毫秒之前等待效果的开始
(2)默认值0 – 不延迟,立即执行
transition的综合
1、transition:复合属性,检索或者设置对象变化时的过渡
2、语法;:transition:property duration timing-function delay;
过渡属性的总结:
- transition-property:指定属性名
- transition-duration:过渡时间
- transition-timing-function:过渡方法
- transition-delay:延迟