css动画属性

transition属性

• 总设置

<!--下面这个表示会在一秒改变颜色并宽度加宽-->
.box{
    width: 100px;
    height: 100px;
    background: red;
    transition: 1s;
  }
  .box:hover{
    background-color: seagreen;
    width:200px
  }
  <!--这次是只有颜色变化是1秒宽度是瞬间完成-->
  .box{
    width: 100px;
    height: 100px;
    background: red;
    transition: 1s background-color;
  }
  .box:hover{
    background-color: seagreen;
    width:200px
  }
  <!--下面这个颜色会在一秒变化，宽度会在一秒以后开始变化并且完成时间为1秒-->
  .box{
    width: 100px;
    height: 100px;
    background: red;
    transition: 1s background-color,1s 1s width;
  }
  .box:hover{
    background-color: seagreen;
    width:200px
  }
  <!--下面这个和上面的基本相同，只不过加了一个变化速度减速-->
  .an{
    width: 100px;
    height: 100px;
    background: red;
    transition: 1s background-color,1s 1s width ease-out;
  }
  .an:hover{
    background-color: seagreen;
    width:200px
  }

通过上面的练习可以知道transition属性可以只有一个时间的话代表所有的过度时间都为1s如果指定css样式的话那么只有指定的样式变化以后会生效，可以同时指定多个样式通过逗号分割，自己也经过测试发现这些书写顺序竟然不影响。但是还是养成自己的一个习惯，按自己喜好排好顺序，看起来也方便

• 单个属性

接下来看一下咱们刚才设置的属性都代表什么

.box{
/*下面这个属性就是要设置css属性变化时有动画效果的属性有很多就不一一列出来了，大多数都可以*/
transition-property:color;
/*下面的属性表示动画执行的时间单位可以是s或ms*/
transition-duration: 2s;
/*下面的代表在多少秒以后执行动画1s就代表1s以后才执行动画效果和上面的动画时间结合相当于这次动画将3秒单位可以是s或ms*/
transition-delay:1s;
/*
这个属性就表示动画执行过程中动画的速度递增，可以自定义默认就是1
（1）linear：匀速

（2）ease-in：加速

（3）ease-out：减速

（4）cubic-bezier函数：自定义速度模式
*/
transition-timing-function:linear;
}

• 多个不同的值设置时
  1.同时 设置多个transition-property的值时

.box{
	transition-property: width,height;
    transition-delay: 200ms;
    transition-timing-function: linear;
    transition-duration: 2s;
}
/*等于*/
.box{
	transition: width 2s linear 200ms,height 2s linear 200ms;
}

2. 多个transition-property对应多个transition-duration。。。

#box{
    transition-property: width,height,left;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*等于*/
#box{
    transition: width 2s linear 200ms,height 500ms ease 0s,left 2s linear 200ms;
}

当有多个属性时会按照顺序进行设置,transition-duration，transition-delay。。。这些属性不够时将从第一个开始轮训重新开始
3. 当transition-property属性少于其他属性只会取其对应的属性，后面的将忽略：

#box{
    transition-property: width;
    transition-duration: 2s,1s;
    transition-timing-function: linear,ease;
    transition-delay: 2s,1s;
}
/*=于*/
#box{
    transition: width 2s linear 2s;
}

4. 不能有动画属性的值将会跳过

#box{
    transition-property: width,z,height;
    transition-duration: 1s,2s;
    transition-timing-function: linear,ease;
    transition-delay: 1s,2s;
}
/*=于*/
#box{
    transition: width 1s linear 1s,height 1s linear 1s;
}

5. 有重复值后面的覆盖前面的

#box{
    transition-property: width,height,width;
    transition-duration: 1s,2s,3s;
    transition-timing-function: linear,ease;
    transition-delay: 1s,2s,3s;
}
/*=于*/
#box{
    transition: width 3s linear 3s,height 2s ease 2s;
}

transition-duration

1. 在不同地方设置transition-duration效果也不同，下面这个例子就是鼠标移入盒子变宽过渡时间5s比较慢，鼠标移出以后1s过渡时间还原，当“ * ”行去掉鼠标移入移出过度时间将是相同的

#box{
	width: 500px;
    transition-duration: 1s;
}
#box:hover{
    width: 500px;
    transition-duration: 5s;  *
}