利用css3属性：transition-duration来做简单的动画
transition-duration是属于css3的属性，用来指定对象过渡的持续时间。
为了兼容不同的浏览器，需要加上相应的前缀，有以下几种写法，我们设定持续时间为3秒：
selector{
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
-ms-transition-duration: 3s;
transition-duration: 3s;
} 这个属性怎么用来制作动画呢？既然是动画， 肯定有个初始状态和结束状态，那么我们只需要指定这两个状态就可以了。
首先，我们来做一个简单的移动。
放一个黄色的div在页面中，为了方便其移动，id为“test1”，设置其position为absolute，初始left值为0即起始的距离，当然最重要的transition-duration属性不要忘记咯，css如下：
div {
width:300px;
height:200px;
position:absolute;
left:0;
background:yellow;
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
-ms-transition-duration: 3s;
transition-duration: 3s;
} 然后只需要在页面中，插入一段对left赋值的脚本就可以了，即对终点left赋值，使其移动到left:300px的位置，脚本如下：
var test1 = document.getElementById('test1');
test1.style.left='300px';
ok，这样就实现了简单的水平移动。
接下来，我们还可以用css3中的transfrom来做一些其他的动画，比如鼠标hover的时候，div倾斜到某个角度。
代码如下：
<!DOCTYPE html>
<html scrollbar="no">
<head>
<title>transtion demo</title>
<style type="text/css">
.animate {
width: 300px;
height: 200px;
position: absolute;
text-align: center;
}
.test1 {
background: yellow;
-webkit-transition-duration: 3s;
}
.test2 {
top: 400px;
background: green;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transition-duration: 3s;
}
.test3 {
top: 800px;
background: #000;
-webkit-transition-duration: 3s;
}
.test3:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
</style>
</head>
<body>
<div class="animate test1" id="test1">test1</div>
<div class="animate test2" id="test2">test2</div>
<div class="animate test3" id="test3">test3</div>
<script type="text/javascript">
var a = document.getElementById('test1');
a.style.left = '300px';
var b = document.getElementById('test2');
b.style.WebkitTransform = 'rotate(40deg)';
// a.style['-webkit-transition-duration'] = '3s';
// a.style['transition-duration'] = '3s';
</script>
</body>
</html>最后，有个需要注意的是，如果通过javascript来设置transition-duration，原生的javascript可以这样用：
element.style['-webkit-transition-duration'] = '3s';这个只是很简单的一个应用，如果要用这个属性来做更多的应用，还需要自己再研究，看看别人的demo
分类:
javascript
, css
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
2011-01-08 如何在Google Chrome(谷歌浏览器)中导入360浏览器的书签