CSS transition属性

前言

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;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

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;
}