大家好，欢迎来到IT知识分享网。
前言
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;
}
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/14481.html
