有沒有辦法在不使用觸發事件的情況下啓動css轉換？

我在網上找了好幾個小時，但沒有發現任何關於在沒有使用觸發器事件的情況下開始css轉換的情況。我沒有將它用於網站，而是用於某種廣告。這就是我得到：[（的jsfiddle）] [1]有沒有辦法在不使用觸發事件的情況下啓動css轉換？

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>

希望有人能幫助我

來源

2014-01-22 user2811083

你到底想要轉換什麼？ –

@NiettheDarkAbsol從代碼中不明顯嗎？ – Shomz

如果只有兩個狀態，你可以用單選按鈕處理它，否則，你不需要某種事件。 –

您可以使用關鍵幀複製您的寬度動畫。動畫仍然會在頁面加載時啓動（或其他觸發器，如添加一個類，這是您想避免的），但不同之處在於，使用關鍵幀可以完全控制實際可見動畫何時啓動。例如，您可以設置一個15秒的動畫，並將0％到66％的關鍵幀設置爲相同（靜態），並僅執行67％到100％之間的寬度動畫（相當於10- 15秒）。

有用的資源：

來源

2014-01-22 15:07:07 Shomz

+1這裏是使用jquery的addClass演示http://jsfiddle.net/WS82p/ – DaniP

謝謝Danko！這工作完美！ – user2811083

號在編程時，你必須有一個觸發做一些事情。現在，這個觸發器可以是一定的時間量，這不需要點擊，滾動等等。關於定時here有一個很好的問題。

來源

2014-01-22 15:07:44 WreithKassan

您可以使用關鍵幀動畫。它不需要觸發器 –

有沒有辦法在不使用觸發事件的情況下啓動css轉換？

回答

相關問題