## 假设一个div样式如下
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: red;
left: 0;
top: 0;
position: absolute;
opacity: 1;
}
</style>
</head>
<body>
<div></div>
<script src="./animation.js"></script>
<script>
var div = document.querySelector(‘div‘);
// animate(div, ‘width‘, 500);
// animate(div, ‘opacity‘, 50);
animate(div, {
width: 200,
left: 500,
opacity: 50
});
</script>
</body>
</html>
```
## 只针对于单个样式
```javascript
function getstyle(el, property) {
if (getComputedStyle) {
return getComputedStyle(el)[property]
} else {
return el.currentstyle[property];
}
}
function animate(el, properties) { //el:元素;properties{property:属性;target:目标};
clearInterval(el.timerId)
el.timerId = setInterval(function() {
for (var property in properties) {
var current;
var target = properties[property];
if (property === ‘opacity‘) {
current = Math.round(parseFloat(getstyle(el, ‘opacity‘)) * 100)
} else {
current = parseInt(getstyle(el, property))
}
var speed = (target - current) / 30;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (property === ‘opacity‘) {
el.style.opacity = ((current + speed) / 100)
} else {
el.style[property] = (current + speed) + ‘px‘;
}
}
}, 10)
}
```
## 针对多个样式
```javascript
function getstyle(el, property) {
if (getComputedStyle) {
return getComputedStyle(el)[property]
} else {
return el.currentstyle[property];
}
}
function animate(el, properties) { //el:元素;properties{property:属性;target:目标};
clearInterval(el.timerId)
el.timerId = setInterval(function() {
for (var property in properties) {
var current;
var target = properties[property];
if (property === ‘opacity‘) {
current = Math.round(parseFloat(getstyle(el, ‘opacity‘)) * 100)
} else {
current = parseInt(getstyle(el, property))
}
var speed = (target - current) / 30;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (property === ‘opacity‘) {
el.style.opacity = ((current + speed) / 100)
} else {
el.style[property] = (current + speed) + ‘px‘;
}
}
}, 10)
}
```
原文地址：https://www.cnblogs.com/lilansheng/p/11621247.html