CSS动画——transition详细讲解

一、transition属性

1. transition 属性是一个简写属性，可用于设置四个过渡属性
2. transition-property   过渡效果的 CSS 属性的名称（height、width、opacity等）(默认值为all)
3. transition-duration   完成过渡效果需要时间(默认值为0s)
4. transition-timing-function     规定速度效果的速度曲线(默认值为ease函数)
5. transition-delay          过渡效果何时开始（延迟时间默认值为0s）

二、渐变函数值

- 渐变函数是transition-timing-function其中贝塞尔曲线的预设值

    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和ease类似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)
    linear全程匀速cubic-bezier(0,0,1,1)

三、复合式写法

1. transition：css属性名  过度时间  渐变函数值  延迟时间

2. 一个属性的简写transition: 属性 持续时间 速度 延迟

3. 多个属性的简写transition: 属性1 持续时间1 速度1 延迟1， 属性2 持续时间2 速度2

//过渡动画，单词
transition

//过渡动画的简写格式
transition: 属性名		过渡时间		运行方式		动画延迟
transition:property	duration	liming-function		delay
//例如：
transition: width	4s	ease	0s;
transition:	all	4s	lineal	3s;

//过渡动画的运动方式，常用的有匀速，缓冲，请写出单词
匀速，linear
缓冲，ease

//过渡动画的时间，要设置时间为3秒钟，应该怎么写这个三秒
3s

//过渡动画的时间，要设置时间为500豪秒，如何写这五百豪秒
500ms

//根据描述写出样式：过渡动画，让宽度发生变化，持续时间四秒钟，匀速运动，没有延迟
transition:width	4s	linear	0s;

//根据描述写出样式：过渡动画，让全属性都变化，持续时间500豪秒，缓冲运动，3秒延迟
transition:width	500ms		ease	3s;