css基础（八）－－动画transition

32.过渡属性 transition-property

css中新增的模块transition

 

通过鼠标单击，获取焦点，被点击，或者对任何元素改变时触发，并平滑的以动画效果改变css的属性值

创建简单的过渡效果步骤：

1.在默认样式中生命初始状态样式

2.生命过度元素的最终状态，比如悬浮状态

3.在默认样式中通过添加过度函数，添加一些不同的样式

 

transition是一个复合属性（包括一下几个子属性）

1.transition-property:指定过渡或动态模拟的css

2.transition-duration:指定完成过渡的时间

3.transition-timing-function:指定过渡函数

4.transition-delay:指定开始出现的延迟时间

 

transition-property

用来制定过渡动画的css属性名称，而这个过渡属性只具备一个中心值属性（需要产生动画的属性）才能具备过渡效果，其对应过渡的css属性有：

注意：当transition－property属性值为all时，表示以上所有属性

 

假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。

 

例如：

让容器在hover状态下宽度从200px慢慢过渡到400px

div {

  width: 200px;

  height: 200px;

  background: red;

  margin: 20px auto;

  -webkit-transition-property: width;

  transition: width;

  -webkit-transition-duration:.5s;

  transition-duration:.5s;

  -webkit-transition-timing-function: ease-in;

  transition-timing-function: ease-in;

  -webkit-transition-delay: .18s;

  transition-delay:.18s;

}

div:hover {

  width: 400px;

}

 

transition-duration

设置一个属性过渡到另一个属性所需要的时间

例子：如上

transition-timing-function

过渡的缓动函数，用来制定浏览器的过渡速度以及过渡期间操作进展的情况

transition-delay

与transition－duration极其类似，不同的是

transition－duration是用来设置过渡动画的持续时间

transition－delay：用来制定一个动画的开始执行时间

如果想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起用逗号隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式，但注意的是第一个时间的值为duration，第二个时间的值为delay

例如：

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

 

鼠标状态

1、a:link{color:#fff}  未访问时的状态（鼠标点击前显示的状态）

  2、a:hover{color:#fff}  鼠标悬停时的状态

  3、a:visited{color:#fff}  已访问过的状态（鼠标点击后的状态）

  4、a:active{color:#fff}  鼠标点击时的状态

  5、a:focus{color:#fff}  点击后鼠标移开保持鼠标点击时的状态（只有在<a href=“#"></a>时标签中有效）