css transition opacity,CSS transition属性

css transition opacity,CSS transition属性前言transition通常用来设置animatable元素状态切换的效果,如淡入淡出等。以下介绍下transition的属性及值,以及如何对非animatable,如display等的一些小技巧。属性1、transition-property:指定要使用过渡效果的属性,比如宽度,高度或者透明度等。2、transition-duration:指定变化所需的时间3、transition-dela…

大家好,欢迎来到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等

f113f6f3e386?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

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

(0)
上一篇 2024-02-27 11:00
下一篇 2024-03-01 11:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信