传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 transition

2017-10-29 16:04| 发布者: admin| 查看: 907| 评论: 0|来自: 蚂蚁部落

传智播客

transition翻译成汉语是"过渡"的意思。

CSS3 transition属性可让元素的css属性值在一定时间段内进行平滑的过渡。

此属性是一个复合属性。

语法结构:

[CSS] 纯文本查看 复制代码
transition:[transition-property] || [transition-duration] || [transition-timing-function] || [transition-delay]

参数解释:

(1).transition-property:设置要进行过渡效果的CSS属性。

(2).transition-duration:设置CSS属性过渡效果持续的时间。

(3).transition-timing-function:设置过渡效果动画类型。

(4).transition-delay:设置过渡效果延迟的时间。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
  transition:width 2s;
  -moz-transition:width 2s;
  -webkit-transition:width 2s;
  -o-transition:width 2s;
}
#ant:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

transition属性值规定要进行"过渡"的CSS属性,如果此CSS属性值发生改变,就会应用过渡效果。

上面的代码规定width属性具有过渡效果,那么width属性值发生改变就会采用过渡效果。

transition是复合属性,自然可以将属性分别设置,具体可以参阅下面的章节:

(1).transition-property可以参阅CSS3 transition-property一章节。

(2).transition-duration可以参阅CSS3 transition-duration一章节。

(3).transition-timing-function可以参阅CSS3 transition-timing-function一章节。

(4).transition-delay可以参阅CSS3 transition-delay一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:13 , Processed in 0.080829 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部