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. — user400654
– user400654, Commented Jan 22, 2014 at 15:18

Shomz · Accepted Answer · 2014-01-22 15:07:07Z

2

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:

answered Jan 22, 2014 at 15:07

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:44:15Z

1

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, 2017 at 11:44

CommunityBot

11 silver badge

answered Jan 22, 2014 at 15:07

WreithKassan

2151 silver badge7 bronze badges

1 Comment

Shreyas Tripathy Over a year ago

You can use keyframe animation. it doesn't require a trigger

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related