/*告诉系统哪个属性需要执行过渡效果*/
transition-property: width, background-color;
/*告诉系统过渡效果持续的时长*/
transition-duration: 5s, 5s;
/*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
div:hover{
width: 300px;
background-color: blue;
}
/*1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长
2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;*/
/*告诉系统过渡动画的运动的速度*/
transition-timing-function: linear;
transition-timing-function: ease;
ransition-timing-function: ease-in;等
/*告诉系统延迟多少秒之后才开始过渡动画*/
transition-delay: 2s;
/*如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为*/
transition:all 0s;
CSS 过渡模块
猜你喜欢
转载自blog.csdn.net/mengxianglong123/article/details/84260022
今日推荐
周排行