前言
transition通常用来设置animatable元素状态切换的效果，如淡入淡出等。
以下介绍下transition的属性及值，以及如何对非animatable,如display等的一些小技巧。
属性
1、transition-property: 指定要使用过渡效果的属性，比如宽度，高度或者透明度等。
2、transition-duration: 指定变化所需的时间
3、transition-delay: 指定延迟多长时间后再执行变化
4、transition-timing-function: 通过贝塞尔曲线指定动画的效果。
值可为:ease, linear, ease-in, ease-out, ease-in-out等
transition.png
关于贝塞尔曲线可参考这里
元素淡入淡出
1、结合visibility与transition属性
div {
border: 1px solid #eee;
}
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
}
Item 1Item 2Item 3
2、结合opacity与transition属性
若要额外设置height从0到auto变化，对height属性也要添加transition
div {
transition: opacity 1s ease-out;
opacity: 0;
overflow: hidden;
}
div.active {
opacity: 1;
}
3、opacity结合animation关键帧
.parent:hover .child {
display: block;
animation: fadeIn 1s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
4、对3的扩展，实现淡入淡出
@-webkit-keyframes fadeInOut {
0% {
opacity:1;
}
25% {
opacity:0;
}
50% {
opacity: 0;
}
75% {
opacity:1;
}
}
.anim_fade_image {
position:absolute;
-webkit-animation-name: fadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
-webkit-animation-direction: alternate;
}
