CSS3过渡
来源:互联网 发布:推易淘宝培训是传销吗 编辑:程序博客网 时间:2024/04/27 20:00
CSS3过渡
特点:
(1)本质上是一帧动画,一帧结束后,就没有然后了…..
(2)过渡的效果的实现,必须要通过用户的行为,可能触发 行为:hover,focus,click,JS代码。
1、transition的属性
transition-property:指定元素的过渡属性
transition-duration: 规定了过渡的时间
transition-timing-function: 规定以何种方式过渡
ease:表示的是快速
ease-in :表示的是先慢后快
ease-out:表示的是先快后慢
linear:线性平缓的变换
step(num):规定过渡分几步完成。num只能是正值。
transition-delay: 规定延迟多少时间进行
- 1
- 2
- 3
- 4
- 5
2、缩写
transition: property duration timing-function delay;
- 1
3、触发过渡
只有当用户触发事件,过渡事件才能进行,比如用户点击、鼠标移入移出等等,这是它的一个局限性。
4、局限性
CSS3动画
1、animation动画属性
animation-name:取值为动画名称;
animation-duration:规定动画完成所需时间
animation-timing-function: 规定以什么方式完成动画;
animation-delay: 规定动画延迟多久执行;
animation-iteration-count: 规定动画执行的次数(infinite 无限循环)
animation-direction: 规定动画执行的方向(alternate 规定动画来回执行);
animation-play-state: 规定动画的运行与暂停,默认值为running(运行);paused表示暂停。
animation-fill-mode: 规定动画开始之前和结束之后发生的操作,默认值为none,另外的两个是forwards表示动画结束后元素保留最后的状态;backwards则与forwards相反。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2、@keyframes
规定一个动画,包括动画名称,
form规定初始状态,to规定动画的末状态
- css3过渡
- CSS3过渡
- css3过渡
- CSS3过渡
- CSS3过渡
- CSS3过渡
- <css3>过渡
- CSS3 过渡
- CSS3 过渡
- CSS3--过渡
- CSS3 过渡
- CSS3-过渡
- 【css3】过渡
- CSS3过渡
- CSS3-过渡
- CSS3过渡
- CSS3过渡
- CSS3过渡
- 【整体二分+二维树状数组】BZOJ2738 矩阵乘法
- Spring Aop FirstDemo
- 一文读懂卷积神经网络
- [ Java学习 ] 实验 银行业务模拟
- 递归-openjudge-1108:Boolean Expressions
- CSS3过渡
- JSP三大指令
- Linux —— 所有者(user)群组(Group)其他人(others)
- POJ 3580 SuperMemo (Sply经典操作:成段更新、区间最小值、反转、插入和删除、区间搬移)
- Java运行时的数据区
- 研究生学Linux云计算4个月轻松年薪13万
- 千万千万不要运行的 Linux 命令
- 洛谷P3398 仓鼠找sugar
- String常用方法(二)