[分享]css3延迟时间的属性

CSS3中的transitiondelay（延迟时间）属性指定了CSS过渡效果开始之前的等待时间。当在一个元素上应用过渡并且想要延迟这个过渡效果的开始时间，可以使用transitiondelay属性。...

CSS3中的transition-delay（延迟时间）属性指定了CSS过渡效果开始之前的等待时间。当在一个元素上应用过渡并且想要延迟这个过渡效果的开始时间，可以使用transition-delay属性。

div {
  transition-property: background-color;
  transition-duration: 2s;
  transition-delay: 1s;
} 

在上面的代码中，我们为一个div元素设置过渡效果。transition-property属性指定过渡效果作用的CSS属性，这里是背景颜色（background-color）；transition-duration属性指定过渡效果的执行时间，这里是2秒；transition-delay属性则指定了过渡效果的延迟时间，这里是1秒。

如果有多个CSS属性需要应用过渡效果，可以使用逗号分隔它们，如下所示：

div {
  transition-property: background-color, opacity;
  transition-duration: 2s, 3s;
  transition-delay: 1s, 0.5s;
} 

在上面的代码中，我们为一个div元素设置了两个CSS属性的过渡效果，分别是背景颜色和不透明度（opacity），它们分别使用了2秒和3秒的时间进行过渡，而背景颜色的过渡效果延迟了1秒，不透明度的过渡效果延迟了0.5秒。

总之，通过transition-delay属性，我们可以灵活地控制CSS过渡效果的开始时间，使得页面的动画效果更加生动有趣，视觉效果更加协调和谐。