transition
Transition概念
Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性。
transition-property 用于指定应用过渡属性的名称
transition-duration 用于指定这个过渡的持续时间
transition-delay 用于指定延迟过渡的时间
transition-timing-function 用于指定过渡的类型
transition-property
指定应用过度属性的名称,默认值为all,表示所有可被动画的属性都表现出过度动画
property:指定多个;
none:没有过度动画;
all:所有可被动画的属性都表现出过度动画;
IDENT:属性名称(可以指定多个)
注意:当只设置了 transition-property 属性而没有设置过渡持续时间的时候,过渡效果不会生效。
transition-duration
用于设置过渡的持续时间,属性值以秒s或毫秒ms为单位,默认值为0。
可以指定多个时长,多个每个时长会被应用到由 transition-property 指定的对应属性上。
例如:想让容器的宽度有一个10秒的过渡,高度有一个5秒的过渡,代码如下:
<style>
.box {
width: 200px;
height: 200px;
background-color: dodgerblue;
transition-property: width, height;
transition-duration: 10s, 5s; /*设置与 transition-property 对应的过渡时间*/
}
.box:hover {
/*在鼠标移入的时候修改宽高*/
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="box"></