概念
transition:过渡、转变
transition 是个简写属性,用于设置四个过渡属性
- transition-property 规定设置过渡效果的css属性的名称
- transition-duration 规定完成过渡效果需要多少秒或多少毫秒 必填项 必须带单位
- transition-timing-function 规定速度效果的速度曲线 eg:贝塞尔曲线 linear ease等
- transition-delay 规定过渡效果多少毫秒之后开始。默认为0
eg:
.test{
height: 100px;
width: 100px;
background-color: pink;
transition: 1s 2s;
}
.test:hover{
width: 500px;
}
transiton-property
值:none| all | [,]*
默认值:all
应用于:所有元素(即所有元素都有transition属性,跟所有block元素有宽高属性一样)
none:没有指定任何样式
all:表示指定元素所有支持过渡属性的样式,多个时用逗号隔开
可过渡的样式
不是所有的CSS样式值都可以过渡,只有具有中间值的属性才具备过渡效果
颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度:
[1]max-height min-height max-width min-width height width
[2]border-width margin padding outline-width outline-offset
[3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
transition-timing-function
bezier函数
表示为线性变化,很匀速的过程
ease: 开始和结束慢,中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,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)
step-start: 直接位于结束处。相当于steps(1,start)
step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)
steps函数
步进函数将过渡时间分成大小相等的时间时隔来运行
没有过度效果,而是一帧一帧的变化,integer等于几就分成几帧,阶跃函数
steps(<integer>[,start| end]?)
<integer>:用于指定间隔个数(该值只能是正整数)
第二个参数可选,默认是end,表示开始值保持一次,若参数为start,表示开始值不保持
eg:
#div {
width: 100px;
height: 100px;
animation-name: skyset;
animation-duration: 5000ms;
animation-iteration-count: 1;
border: 1px solid blue;
animation-timing-function: linear;
-webkit-animation-name: skyset;
-webkit-animation-duration: 5000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: steps(5, end);
}
@-webkit-keyframes skyset {
0% {
width: 100px;
}
50% {
width: 150px;
}
100% {
width: 200px;
}
}
integer:
动画效果: 0%-50% 之间的过渡效果,变化五次 即从100px->150px 变化5次
50%-100%之间的过渡效果变化五次,即从150px->200px 变化5次
注:steps的设置是针对两个关键帧之间的的,而非整个动画。
重点是start和end
start | end
0% {
background: red
}
30% {
background: yellow
}
60% {
background: blue;
}
100% {
background: green;
}
原理解释:
(1,start | end)
四个关键帧 一共变化四次 div本身是没有背景色的,所以最终的背景是无色。但是只变化四次,有四种颜色,加上无色,一共五种状态,所以需要丢弃一种状态。
start 黄、蓝、绿、无色 把第一帧的效果去掉,第二帧的效果为填充效果
end 红、黄、蓝、无色 把最后一帧的效果去掉,第一帧的效果为填充效果
(2,start | end)
即每个关键帧都分成两次变化完成,则一共有七次变化。
七帧 一共变化七次, div本身没有颜色,所以最终的背景无色。但是,只变化七次,有七种颜色,加上无色,一种八种状态,所以需要丢弃一种状态
start 橙、黄、灰、蓝、深灰蓝、绿、无色
原理:去掉第一帧的效果,
end 红、橙、黄、灰、蓝、深灰蓝、无色
原理:去掉最后一帧的效果