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

栏目导航

≡文本≡

≡颜色≡

≡单位≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 transition

2017-10-29 16:04| 发布者: admin| 查看: 1157| 评论: 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;
}
#ant:hover{
  width:500px;
  height:500px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

transition属性规定哪些CSS属性要进行过渡,过渡持续的时间和以何种动画方式过渡等特性。

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

[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:all 2s;
}
#ant:hover{
  width:500px;
  height:500px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

复合形式无法一次设置多个属性渐变;关键词all可以粗暴的实现此功能,所有css属性改变都采用过渡效果。

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, 2018-1-19 07:41 , Processed in 0.082809 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部