过渡transition
过渡是元素变化时可以设置给元素属性变化时的切换状态
可以实现一些动画效果,提升用户体验
过渡属性:
transition:(合并)简写属性,内可以设置四种过渡属性;
transition-property:规定css变化的属性的名称;
transition-duration:定义过渡变化的花费时间;
transition-timing-function:过渡效果的时间曲线,默认:ease;(缓慢开始,加速,减速,完成变化)
transition-delay:过渡效果何时开始,默认:0;
合并简写
delay(从何时开时间,一般可以用于延时变化);
transition: width 1s linear 2s;
/*宽 1秒 线性(匀速) 延时两秒变化*/
分开写
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
css动画
要形成动画,先要定义动画,然后才能调用;
1.定义:
@keyframes 定义名称{
from(动画开始,=0%){(定义变化的属性)}
to(动画结束,=100%ÿ