-
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
查看全部 -
dispiay不能和transition 一起使用
transition 后面不要跟all all会导致浏览器大量资源 导致画面卡顿
查看全部 -
transition和animation为动画属性
查看全部 -
讲得真好!查看全部
-
11111
查看全部 -
demo
查看全部 -
transition
property
duration
过渡效果
2. display不能和transition一起使用
查看全部 -
①掌握transition和 animation
② 模仿
③独自开发
查看全部 -
css
帧动画
过度动画
动画属性
transition
animation
查看全部 -
什么是动画
查看全部 -
学习CSS3意义
查看全部 -
动画监听事件:
查看全部 -
时间函数记录
查看全部 -
transform并不是动画属性,但是它在为我们动画实现做出了杰出的贡献
查看全部 -
css3 动画 transition animation
动画常常和transform属性常用
查看全部
举报