CSS之transition与animation（十四）

该文主要讲解了过渡动画与自定义动画的使用及各自的属性，还有与之相关的其他知识点。

1、transition 过渡动画

过渡动画就是开始状态到结束状态之间的中间的状态-补间动画。

• 优点：动画更细腻，内存开销小
• 兼容性：移动PC都兼容，但是需要加上对应的浏览器前辍
   

过渡动画何时发生？

• 当属性值发生变化时，才会触发 transition 动画
• transition 动画主要与 :hover 配合，来实现鼠标滑动动画效果

 

1.1、transition 语法

/* 
	[] 表示这个值，可以省略不写
	css属性名  过渡时间   时间函数  延迟时间 
*/
transition: transition-property transition-duration 
            [transition-timing-function] [transition-delay];

/* 
    width : 过渡属性为width
    1s : 动画时长1秒
    linear : 直线匀速动动
    0s : 延迟时间,不延迟
*/
transition: width 1s linear 0s;
transition: width 1s;
transition: width 1s linear;
transition: width 1s 2s;

1.2、可参与过渡的属性

可参于过渡的属性：

• 所有数值类型的属性，都可以参与过渡
• 比如：width、height、left、top、border-radius、font-size、opacity
• 背景颜色和文字都可以被过渡
• 所有的变形（包括 2D 和 3D）都能被过渡，在 CSS 中 90%的属性都可以被过渡
   

不能参与过渡动画的属性：

• float 和 position 不能
• display 无法过渡
• font-family 等

1.3、all 属性

/*
定义为 all，即让所有属性参与过渡；
all 属性不要随意使用，会引发效率问题，最好指定特定的属性。
    all: 所有属性
    1s: 动画过渡时间为1s
    linear: 匀速运动
    0s: 动画延迟时间0s
*/
transition: all 1s linear 0s;