CSS – 动画 – 过渡transition

简介

CSS3 提供了一种动画过渡效果transition

过渡transition

通过过渡transition，我们可以在不使用 flash 动画 或 Javascript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容

1.规定希望把效果添加到哪个 css 属性上

2.规定效果的时长

语法

transition : property duration timing-function delay

transition-property : 规定设置过渡效果的 CSS 属性的名称

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

transition-timing-function : 规定速度效果的速度曲线

transition-delay : 定义过渡效果何时开始

transition-property

transition-property 是指你需要控制那个属性在变化时使用过渡，比如

div{
  top:10px;
  left:10px;
  
  &:active{
    letf:800px
    top:800px
  }


  transition-property: left;  // 设置了 left 属性在变动时进行过渡
}

如上代码，设置了 transition-property: left; ,此时，点击 div 后，元素在往 left 的方向运动时，会出现过度，但 top 方向则不会，而且直接闪现。

transition-timing-function

transition-timing-function 是指该过渡运动使用什么类型的线性运动曲线

liner 开始到结束都以相同速度运动cubic-bezier(0,0,1,1)

ease 慢速开始，然后变快，然后慢速结束 cubic-bezier(0.25,0.1,0.25,1)

ease-in 慢速开始运动，结束是快速cubic-bezier(0.42,0,1,1)

ease-out 快速开始运动，结束是慢速cubic-bezier(0,0,0.58,1)

ease-in-out 慢速开始，慢速结束cubic-bezier(0.42,0,0.58,1)

cubic-bezier(n,n,n,n) 自定义值

transition-delay

transition-delay 延迟执行，单位为 毫秒

简写

transition : property duration timing-function delay

transition:border 2s linear 0s;
设置边框过渡，时间为2秒，linear 运动，立即执行

设置多个属性过渡动画

transition:
border 2s linear 0s,
left 2s linear 0s;
设置边框过渡，时间为2秒，linear 运动，立即执行
设置 left 过渡，时间为2秒，linear 运动，立即执行

设置所有属性都有过渡

transition:all 2s linear 0s;

设置 all 所有属性都为过渡，有两个缺点

1.所有样式过渡效果一样.

2.效率低下，它会去查询所有添加的样式.

3.建议还是使用单独添加过渡。

浏览器兼容

因为transition最早由 webkit 内核浏览器提出来的，火狐和 opera 最近才支持，但是 IE 全家都不支持，每个浏览器都有它家的标准，不兼容w3c标准，因此在应用 transition 时我们有必要加上各自的前缀，最好放上我们的w2c标准写法，这样标准会被覆盖，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去

-moz-transition : all 5s ease 1s;
-webkit-transition : all 5s ease 1s;
-o-transition : all 5s ease 1s;
transition : all 5s ease 1s;