我在互联网上找了几个小时，但没有找到任何关于在不使用触发事件的情况下启动 css 转换的内容。我不是将它用于网站，而是用于一种广告。 这就是我得到的:[(jsfiddle)][1]
body{
width:1920px;
height:1080px;
margin:0;
padding:0;
background: #FFF;
}
#box{
position: absolute ;
left: 0px;
top: 0px;
width: 800px;
height: 140px;
border:solid 5px #000;
transition: width 5s linear 2s;
overflow:hidden;
}
#box:hover{
left: 0px;
height: 140px;
width: 0px;
}
img{
display: inline-block;
left: 100px;
margin-top: 20px;
width: 100px;
height: 100px;
position: absolute
}
.song1{
position: absolute;
left: 250px;
margin-top: 20px;
display: inline-block;
font-size: 20px;
width: 260px;
height: 120px;
}
.song2{
position: absolute;
left: 350px;
margin-top: 40px;
display: inline-block;
font-size: 20px;
width: 260px;
height: 120px;
}
</style>
<script>
</script>
</head>
<body>
<div id="box">
<img src="/Users/ts/Desktop/1.png" class="album">
<div class="song1">NOW --> </div>
<div class="song2">NEXT --></div>
</div>
</body>
</html>
希望有人能帮助我
最佳答案
您可以使用关键帧复制宽度动画。动画仍会在页面加载时开始(或其他触发器，如添加类，这是您要避免的事情)，但不同之处在于，使用关键帧，您可以完全控制实际可见动画何时开始。
例如，您可以设置一个 15 秒的动画，并将 0% 到 66% 的关键帧设置为相同(静态)，并且只在 67% 到 100% 之间(等于 10-15秒)。
有用的资源:
关于javascript - 有没有一种方法可以在不使用触发事件的情况下启动 css transition？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21286470/