css transition opacity,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;

}

• Item 1
• Item 2
• Item 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;

}