您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 transition

2018-7-21 01:47| 作者: admin| 查看: 1831| 评论: 0|来自: 蚂蚁部落

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

CSS3之前,如果要平滑的改变元素的CSS属性值,例如width从100px修改为200px,通常要借助于JavaScript。

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一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 background-clip下一篇:CSS attr()

最新评论

返回顶部