transition属性总结
2017-11-03 本文已影响34人
春木橙云
项目中的一个动效需要用到过度css属性
transition，由此发现这个功能真的非常神奇，但是网上对这一属性的介绍有些模糊，因此特总结如下，以备后查。
transition是什么？
是css过度动效属性，用来让元素变化的有一个过程而不至于突然出现或者改变样式，感官效果好。
transition怎么用？
- 有四个变量，可以单独设置：
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒 |
| transition-timing-function | 规定速度效果的速度曲线 |
| transition-delay | 定义过渡效果何时开始 |
- 通常用法：
transition: all .28s ease;这里all指所有设置的变化，.28s是运动完成的时间，ease是运动的过程（动效）设置。
使用举例
.Star{
position: absolute;
top: 25px;
right: 25px;
box-shadow: 5px 5px 5px #888888;
transition: all .28s ease;
}
THE END
