43. CSS3 transition-duration属性设置动画过渡所需时间

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间。

案例演示:

在鼠标悬停(hover)状态下,让容器从直角慢慢过渡到圆角,并让整个动画持续0.5s。

HTML代码:

<div></div>

CSS代码:

div {
  width: 300px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 20px;
}

效果如下:

CSS3动画之过渡所需时间 transition-duration

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 43. CSS3 transition-duration属性设置动画过渡所需时间

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们