css transition
文章描述：
html动画效果可以用transition来实现，transition有四种属性可以根据自定义来设置
定义
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property:需要参与过渡的属性，例如：width、height、background…
transition-duration:过渡动画的持续时间，单位秒s或毫秒ms
transition-delay：延迟过渡的时间，单位秒s或毫秒ms
transition-timing-function：动画过渡的动画类型，共有6个值，分别是：
ease – 指定一个缓慢开始，然后快速，然后慢慢结束的过渡效果(这是默认值)
linear – 指定从开始到结束以相同速度的转换效果
ease-in – 指定缓慢启动的过渡效果
ease-out – 指定一个缓慢结束的过渡效果
ease-in-out – 指定开始和结束缓慢的过渡效果
cubic-bezier(n,n,n,n) – 在一个三次贝塞尔函数中定义您自己的
用法1：
div{
width:100px;
height:100px;
background:blue;
transition-property: width;/* 需要参与过渡的属性 */
transition-duration: .5s;/* 过渡动画的持续时间 */
transition-delay: .5s;/* 延迟过渡的时间，单位秒s或毫秒ms */
transition-timing-function: ease-out;/* 动画过渡的动画类型 */
}
div:hover{
width:300px;
}
用法2：
div{
width:100px;
height:100px;
background:blue;
transition:width .5s .5s ease-out ;
}
div:hover{
width:300px;
}用法3：
多个属性是依次执行动画效果
div{
width:100px;
height:500px;
background:teal;
/* 而且我还能多个属性逐个显示过渡动画效果哦~~*/
transition:width .5s linear,height .5s ease .5s,background 1s ease-in 1s;
}
/* 鼠标悬停，改变div的样式 */
div:hover{
width:500px;
height:100px;
background:hotpink;
}
发布时间：2022/11/04
发表评论