一、过渡与动画
1、过渡的基本使用
transition过渡属性是cSS3浓墨重彩的特性,过渡可以为一个元素在不同样式之间变化自动添加“补间动画”。
transition属性有4个要素:transition: width 1s linear 0s;
width :什么属性要过渡;1s:动画时长;inear:变化速度曲线;0s:延迟时间。
过渡要定义在元素的开始状态上,而不是结束状态上。
哪些属性可以参与过渡:
所有数值类型的属性,都可以参与过渡,比如width、height、left、top、border-radius、opacity。
背景颜色和文字颜色都可以被过渡。所有变形(包括2D和3D)都能被过渡。
如果要所有属性都参与过渡,可以写all。transition: all 1s linear 0s;
过渡的四个小属性
属性 | 意义 |
---|---|
transition-property | 哪些属性要过渡 |
transition-duration | 动画时间 |
transition-timing-function | 动画变化曲线(缓动效果) |
transition-delay | 延迟时间 |
2、过渡的缓动效果
缓动参数:transition的第三个参数就是缓动参数,也是变化速度曲线。
transition : width 1s linear 0s ;
linear :变化速度曲线
贝塞尔曲线
网站https: / /cubic-bezier.com/可以生成贝塞尔曲线,可以自定义动画缓动参数。
transition: width 1s cubic-bezier(0.1,0.7,1.0, 0.1) 0s;
3、动画的定义和调用
动画的定义: 可以使用@keyframes来定义动画,keyframes表示“关键帧”,在项目上线前,要补上@-webkit-这样的私有前缀。
动画的调用: 定义动画之后,就可以使用animation属性调用动画。
动画的执行次数:
第五个参数就是动画的执行次数,animation: r 1s linear 0s 3;(3是次数)
如果想永远执行可以写infinite。
如果想让动画的第2、4、6.....(偶数次)自动逆向执行,那么要加上alternate参数即可;
animation : movelr 2s linear os infinite alternate;
如果想让动画停止在最后结束状态,那么要加上forwards;
animation: changeToCircle 1s linear 0s forwards;
多关键帧动画:
@keyframes flash {
0% {
transform:translate(0,0);
}
25% {
transform:translate(100px,0);
}
50% {
transform:translate(100px,100px);
}
75% {
transform:translate(0,100px);
}
100% {
transform:translate(0,0);
}
}
4、课程重点
过渡的四个参数是什么意思?什么是过渡的缓动效果?
什么属性能够过渡?
如何定义和调用动画?如果想无限调用动画,应该怎么做?