Question

我在互联网上寻找了几个小时，但没有找到任何关于在不使用触发器事件的情况下启动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>

希望有人可以帮助我

Answer 1

您可以使用关键帧复制宽度动画。动画仍然会在页面加载时启动（或者其他触发器，比如添加一个类，这是你想要避免的），但不同的是，对于关键帧，你可以完全控制实际可见动画何时开始。

例如，您可以设置15秒动画，并将关键帧从0％设置为66％（静态），并且仅在67％和100％之间设置宽度动画（等于10-15秒）。

有用的资源：

Answer 2

没有。在编程中，你必须有一个触发器来做某事。现在，该触发器可以是设定的时间量，不需要点击，滚动等。关于时间here有一个很好的问题。

有没有办法在不使用触发事件的情况下启动css转换？

2 个答案: