html延时属性css,CSS属性参考

CSS transition-delay 属性用于指定元素执行过渡动画之前的延迟时间。

通过transition-delay属性可以在过渡动画被触发之前延迟一段时间。如果将值设置为0秒，表示立刻执行过渡动画。

例如，假设我们要向右移动一个元素300像素的距离。代码如下：

.container{

width: 800px;

height: 400px;

border:1px solid #ccc;

position: relative;

}

.div{

width: 100px;

height: 100px;

position: absolute;

top: 100px;

left: 100px;

background-color: blue;

transition-property: left;

transition-duration: 1s;

transition-timing-function: linear;

}

.container:hover .div{

left: 400px;

}

当鼠标进入到.container容器元素中的时候，.div元素立刻开始从100像素的位置移动到400像素的位置。如果我们需要在鼠标进入.container容器之后，延迟2秒钟之后，.div元素才开始移动，可以为.div元素设置过渡动画延迟时间为2秒：transition-delay: 2s。

注意，transition-delay的值不能为负数。负数值会使过渡动画立刻被执行，并且没有过渡效果。

你可以为transition-delay指定一个或多个值，多个值之间使用逗号来分隔。多个动画过渡延迟时间值会和其它过渡动画属性一一对应。例如，如果你提供了2个动画过渡延迟时间，那么第一个transition-delay值决定transition-property属性的第一个属性的动画过渡延迟时间，第二个transition-delay值决定transition-property属性的第二个属性的动画过渡延迟时间。

官方语法

transition-delay: [, ]*

参数：

：使用类型来设置过渡动画的延迟时间。时间值如果为负数会立刻执行过渡动画，并且没有过渡效果。

transition-delay属性的初始值为0s。

应用范围

transition-delay属性可以应用所有元素，以及:before和:after伪元素上。

示例代码

transition-delay: 3s;

transition-delay: 2s, 4ms;

transition-delay: inherit;

在线演示

下面的例子演示了transition-delay属性分别为0秒，2秒和-1秒时的情况。

-1s

浏览器支持

CSS3 transition-delay属性的浏览器兼容性列表如下：

html延时属性css,CSS属性参考 | transition-delay相关推荐

html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
html的过渡属性,CSS过渡属性 transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标划过.单击.获得焦点或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值过渡属性需要触发事件, ...
CSS样式属性参考手册
CSS3 动画属性(Animation) 属性描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...
CSS pointer-events属性的使用
楔子在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉.其中动画是最常用的方法. 这里的需求是,弹层的设计,这个弹层希望可以像 native 上的弹层 ...
CSS层叠样式表-属性 /盒子模型
1.属性 (1)字体属性官方文档:https://www.apiref.com/css-zh/properties/font/index.htm 1)font-style 指定字体风格属性用法描 ...
php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
css scroll属性_CSS中的scroll-behavior属性
css scroll属性 CSS | 滚动行为属性 (CSS | scroll-behavior property) Who does not want their links to function ...
常用css样式属性大全（中文注释）
一 CSS文字属性:color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...

html延时属性css,CSS属性参考 | transition-delay

html延时属性css,CSS属性参考 | transition-delay相关推荐

最新文章

热门文章