Is there a way to start css transition without using trigger events?

Question

I looked for hours on the internet but didn't find anything about starting css transition without using trigger events.. I'm not using it for a website but for a kind of advertisement. this is what i got: [(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>

Hope someone can help me

If there were only two states, you could handle it with radio buttons, otherwise, no you need some sort of event. — Kevin B, Jan 22 '14 at 15:18

score 2 · Answer 1 · answered Jan 22 '14 at 15:07

You can replicate your width animation using keyframes. The animation would still start on page load (or other trigger, like adding a class, which is something you want to avoid), but the difference is that with keyframes you can completely control when the actual visible animation starts.

For example, you can set a 15 second animation, and set the keyframes from 0% to 66% to be the same (static) and only do the width animation between 67% and 100% (which equals to 10-15 seconds).

Helpful resources:

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

No. In programming, you have to have a trigger to do something. Now, that trigger can be a set amount of time, which would not require a click, scroll, etc. There is a good question about timing here.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 22 '14 at 15:07

WreithKassan

205
1
7

You can use keyframe animation. it doesn't require a trigger – Shreyas Tripathy Feb 10 '18 at 12:06

Is there a way to start css transition without using trigger events?

2 Answers2