css变形transform属性详细介绍

来源：动视网责编：小采时间：2020-11-27 18:52:22

css变形transform属性详细介绍

css变形transform属性详细介绍:transition：过度属性transition-property 规定设置过度效果的css属性的名称，默认可以写alltransition-duration 规定完成过度效果需要多少秒或毫秒transition-timing-function: 默认easetransition-delay：延时时间ease:逐渐

推荐度：

点击下载本文 文档为doc格式

导读css变形transform属性详细介绍:transition：过度属性transition-property 规定设置过度效果的css属性的名称，默认可以写alltransition-duration 规定完成过度效果需要多少秒或毫秒transition-timing-function: 默认easetransition-delay：延时时间ease:逐渐

transition：过度属性

transition-property 规定设置过度效果的css属性的名称，默认可以写all

transition-duration 规定完成过度效果需要多少秒或毫秒

transition-timing-function: 默认easetransition-delay：延时时间

ease:逐渐变慢

linear:匀速

ease-in:加速

ease-out:减速

ease-in-out:先加速在减速

cubic-bezier：贝塞尔曲线　　

transitionend：过度完成事件

function addEnd(obj,fn){
 obj.addEventListener('WebkitTransitionEnd',fn,false);
 obj.addEventListener('transitionend',fn,false);
}
function removeEnd(obj,fn){
 obj.removeEventListener('WebkitTransitionEnd',fn,false);
 obj.removeEventListener('transitionend',fn,false);
}

注：1在transition里，如果写了多个，那没改变一次样式，就会触发一次事件
　　2注意重复触发transitionend事件。比如下面重复改变p的y轴位置

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
 </style>
</head>
<body>
<div id="nav"></div>
<script>
 var oHome=document.getElementById("nav");
 var count = 10;
 oHome.onclick = function(){
 count += 20;
 oHome.style.transform = 'translate(0,'+ count +'px)'
 addEnd(this,function(){
 count += 20;
 oHome.style.transform = 'translate(0,'+ count +'px)'
 })
 }
 function addEnd(obj,fn) {
 obj.addEventListener('WebkitTransitionEnd',fn,false);
 obj.addEventListener('transitionend',fn,false);
 }
</script>
</body>
</html>

css变形transform属性详细介绍