-
- risan 2021-07-30
demo- 0赞 · 0采集
-
- 云海苍茫 2021-04-29
transition
property
duration
过渡效果
2. display不能和transition一起使用
- 0赞 · 0采集
-
- qq_单人旅途_16 2021-02-17
- 文档流，属性变化的情况下
-
截图0赞 · 0采集
-
- 小伟不是hacker 2020-07-04
- 谢谢老师。
-
截图0赞 · 0采集
-
- 慕移动5952561 2020-05-25
Transition:过渡动画 类似的一个：transform
四大属性：
属性名称：property 1代码顺序
过渡时间:duration 2
延迟时间：delay 4
时间函数：timing-function 3
scss:&:hover{} 伪类选择器：鼠标滑过时的样式 相当于.demo-1:hover{}
.demo-1{
&:hover{
}
transition:width 2s linear (ease) 2s;
}
特性：当文档流的属性有变化的时候才会实现过度，而且文档流开始有一个 初始化
时间函数：实现一个缓动的效果
注意点：display不能和transition一起使用
transition需要元素在文档中有一个初始的属性，浏览器读不到display的任何属性值
transition后边尽量不要跟all 造成浏览器大量计算资源
常见闪动：perspective和backface-visibility
- 0赞 · 0采集
-
- 慕虎2278161 2020-03-19
Transition 开启!
1.属性名称(property)
2.过渡时间(duration) 4.延迟时间(delay)
3.时间函数(timing-function)
需要csc
英语学习：
.box
width(宽度):100px;
height(高度):100px;
background:#000; 000是黑色
- 0赞 · 0采集
-
- 慕无忌7425471 2020-02-17
- trantion
-
截图0赞 · 0采集
-
- 霍洛夫斯基 2020-02-09
transition有个特点，文档流有变化的时候，他才会过渡，而且文档流一定要有个初始
时间函数可以实现缓动的效果
display不能和transition一起使用
transition后面尽量不跟all（影响读取速度和页面流畅性）
常见闪动 可以用perspective和backface-visibility（等3D元素）
- 3赞 · 0采集
-
- 霍洛夫斯基 2020-02-09
要先打好基础（CSS3基础）
Transition基础和写法
Transition的四个属性
1.属性名称（property）
2.过度时间（duration）4.延迟时间（delay）
3.时间函数（timing-function）
分了整洁性，按这个顺序写很不错
- 1赞 · 0采集
-
- 霍洛夫斯基 2020-02-09
要善于向别人学习，学习他人的思路
借鉴前，先脑洞一下自己的思路（就像做题，自己先做）
善于总结和对比，补短板
学起来简单，做起来难（所以要努力学）
- 1赞 · 0采集
-
- 慕盖茨1322725 2020-02-09
transition基础
属性名称（property）
过渡时间(during)
时间延迟(delay)
时间函数(timing-function)
- 0赞 · 0采集
-
- 慕桂英6332459 2019-12-14
- 3D 加速效果
-
截图0赞 · 1采集
-
- qq_慕莱坞3472229 2019-12-05
transition:width 2s; 动画的效果 transition:width 2s ease; 动画的过渡效果，实现一些缓动的效果开始慢后来快最后又慢 transfrom:routate(45deg) :让盒子旋转45°角 transition：transfrom 2s ease; ：盒子有过度的动画旋转效果
- 0赞 · 0采集
-
- 和樱 2019-11-24
transition有四个要素：①属性名称（property）②过渡时间（duration）③延迟时间（delay）④时间函数（timing-function）
写的顺序：①②④③
注意：属性名称是css已有的属性的名称，不是自定义的。比如transform、opacity
代码：
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="transition.css"> </head> <body> <div class="box demo-1"> </div> </body> </html>
/*transition.css*/ .box{ width: 100px; height: 100px; background: #000; } .demo-1{ transition: transform 2s linear; } .demo-1:hover{ transform: rotate(45deg); }tips：1.display不能和transition一起使用。原因：transition是需要初始值的。而display:none时，它脱离了文档流的，transition读不到初始值。display:block时，虽然显示出来了，但是transition读的是瞬时值，依旧是空。所以display不要和transition一起使用
2.transition后面尽量不要跟all。原因：会造成大量的计算资源，会将宽高等等的属性全看一遍，增加GPU的损耗，导致页面卡顿
再举一个栗子：利用属性名为opacity实现渐入溅出效果http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-8.html
- 1赞 · 1采集
-
- 慕数据53128 2019-11-24
dispiay不能和transition 一起使用
transition 后面不要跟all all会导致浏览器大量资源 导致画面卡顿
- 1赞 · 2采集
-
- 慕后端8018430 2019-11-21
1、transition基础和写法
①属性名称（property）
②过度时间（duration） 延迟时间（delay）
③时间函数（timing-function）
2、注意：
①display不能和transition一起使用
②transition后面尽量不要跟all
③常见闪动可以persp和backface-visibility
- 0赞 · 0采集
-
- 慕粉7571332 2019-11-09
- 属性名-过度时间-函数-延迟时间
-
截图0赞 · 0采集
-
- 慕神8595067 2019-10-31
- Transition (1)属性名称 (2)
-
截图0赞 · 0采集
demo
