CSS3过渡动画详解-优快云博客

本文链接：https://blog.youkuaiyun.com/VVVZCS/article/details/82800157

transiton

语法：

transition: property duration timing-function delay;

transition属性是个复合属性，她包括以下几个子属性：

transition-property ：规定设置过渡效果的css属性名称
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
transition-delay ：指定开始出现的延迟时间
默认值分别为：all 0 ease 0

注：transition-duration 时长为0，不会产生过渡效果

改变多个css属性的过渡效果时：

a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

子属性
transition-property
transition-property: none |all |property;

值为none时，没有属性会获得过渡效果，值为all时，所有属性都将获得过渡效果，值为指定的css属性应用过渡效果，多个属性用逗号隔开

transition-duration
transition-duration：time;

该属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间

该属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，解释下：

注意：值cubic-bezier(n,n,n,n)（三次贝塞尔曲线，速度曲线）可以中定义自己的值，

{"ease":".25,.1,.25,1","linear":"0,0,1,1","ease-in":".42,0,1,1","ease-out":"0,0,.58,1","ease-in-out":".42,0,.58,1"}

linear 从初始到终止都是恒速
ease 从初始到终止由快到慢，逐渐变慢
ease-in 从初始到终止状态速度越来越快，且呈一种加速状态通常称这种效果为渐显效果
ease-out 从初始到终止状态速度越来越慢，且呈一种减速状态通常称这种效果为渐隐效果
ease-in-out 元素从初始到终止状态，先加速后减速，通常称这种效果为渐显渐隐效果

具体的运动情况可以看下这里 http://cubic-bezier.com/#.17,.67,.83,.67

看下面一个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      margin: 300px;
      width: 100px;
      height: 100px;
      background-color: #98FB98;
      color: #fff;
      line-height: 100px;
      text-align: center;
      transform: rotate(0deg);
      transition: all 1.5s;
    }
    div:hover{
      transform: rotate(360deg);
      background-color: #00FFFF;
      width: 200px;
      height: 200px;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <div>Div</div>
</body>
</html>

-------------------------------------------------------------------------

transition和display的坑点：
在制作下拉框动画或者鼠标滑动然后有一个div滑动出来的类似动画的过程中，如果同时使用了transition和display，display会破坏transition，使transition无法使用
即在CSS样式表中使用transition ： all 0.5s ，然后再使用display：none，transition无效
这个时候，可以使用visibility(设置元素是否隐藏，即使不可见也会占据页面上的空间)，这时就可以用horver了
也可以使用setTimeout方法解决，利用setTimeout将设置display：block和元素属性的两条代码分开
例如：
DLAPP_border.style.display = "block";
setTimeout(function(){
DLAPP_border.style.top = "43px";
},0);