本节简介:讲解transition属性的用法,及制作简单交互小动画按钮。
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
默认情况下,给元素添加“transition”属性,那么该元素所有属性都会发生过度变化;transition:background 0.5s;表示只是背景颜色发生过渡性变化
transition过渡:默认是all所以的 0.5s[0.5秒] 宽、高、背景等[0.5s 2s]两秒钟之后执行速度0.5s[第一个是过渡时间,第二个是几秒钟之后执行];ease默认弹出速度 ease-in先慢后快 ease-out先块后慢;linear匀速的;
transition 放在初始属性添加,不能给hover添加
transition 时间 (过渡时间) 时间(延迟时间,鼠标移入后等待多久开始执行)ese(默认值,一般情况下使用) ease-in(慢速开始,逐渐变快)ease-out(快速开始,后变慢)linear(匀速改变)
transition:属性(一般不写就是all)名称 时间 过渡效果
transition : easy-in加速;easy-out 减速; linear匀速;第一个时间是过渡时间,第二个时间是延迟时间;
ease-in慢速开始,逐渐变快;linear匀速
transition:0.5s;要给初始属性加,不能加在hover上;
transition:0.5s ease-in;越来越快; linear匀速;transition:0.5s 2s;代表2秒后再进行过渡;
transition:background 0.5s;只对背景使用过渡;