使用javascript设置两个动画之间的时间延迟

我正在寻找一个时间延迟之间的秒框扩大，然后在几秒钟后，框阴影。我试过使用setInterval，但效果不佳。还有其他干净的方法吗

setInterval（时钟，1000）；
功能时钟（）{
var d=新日期（）；
document.getElementById（“hour”）.innerHTML=“Hours:+d.getHours（）；
document.getElementById（“分钟”）.innerHTML=“分钟：”+d.getMinutes（）；
document.getElementById（“seconds”）.innerHTML=“seconds:+d.getSeconds（）；
}
函数myfunction（）{
var object=document.getElementById（“秒”）；
object.style.padding=“100px”；
object.style.boxShadow=“0px 0px 15px黑色”；
}

div{
位置：绝对位置；
左：100px；
顶部：100px；
文本对齐：居中；
边框：5px纯灰；
填充：15px；
保证金：0；
过渡：0.3s；
}
div:悬停{
盒影：0px 5px 5px黑色；
}
第n个孩子（2）{
宽度：100px；
边框：1px纯黑；
背景颜色：浅黄色；
}
第n个孩子（3）{
宽度：100px；
边框：1px纯黑；
背景颜色：浅蓝色；
}
第n个孩子（4）{
宽度：100px；
边框：1px纯黑；
背景颜色：浅绿色；
过渡：.5s；
}

更改秒背景设置
卡西欧

您可以通过为

转换

属性添加多个属性来实现这一点，并在您的情况下，使用

1s设置
框阴影
属性的延迟

transition: padding .5s, box-shadow .5s 1s;

堆栈片段


setInterval（时钟，1000）；
功能时钟（）{
var d=新日期（）；
document.getElementById（“hour”）.innerHTML=“Hours:+d.getHours（）；
document.getElementById（“分钟”）.innerHTML=“分钟：”+d.getMinutes（）；
document.getElementById（“seconds”）.innerHTML=“seconds:+d.getSeconds（）；
}
函数myfunction（）{
var object=document.getElementById（“秒”）；
object.style.padding=“100px”；
object.style.boxShadow=“0px 0px 15px黑色”；
}
div{
位置：绝对位置；
左：100px；
顶部：100px；
文本对齐：居中；
边框：5px纯灰；
填充：15px；
保证金：0；
过渡：0.3s；
}
div:悬停{
盒影：0px 5px 5px黑色；
}
第n个孩子（2）{
宽度：100px；
边框：1px纯黑；
背景颜色：浅黄色；
}
第n个孩子（3）{
宽度：100px；
边框：1px纯黑；
背景颜色：浅蓝色；
}
第n个孩子（4）{
宽度：100px；
边框：1px纯黑；
背景颜色：浅绿色；
过渡：填充。5s，盒影。5s 1s；
}
更改秒背景设置
卡西欧




的可能重复项没有一个像语句这样的代码可以放在中间。这将更容易看到断点的位置。@Goldensquare您也可以动态添加
转换
，但会在一秒钟内用第二个样本更新。@Goldensquare用第二个样本更新谢谢。只有一件事，我很好奇，在第一个片段中，方框阴影.5s在这里。5s应该与padding.5s相同，以便在第一个片段之后同步第二个动画，对吗？@Goldensquare在第一个片段中，
.5s
是每个转换的持续时间，
box shadow的
1s
是转换开始前的延迟。这意味着您可以分别选择每个属性的持续时间和延迟。