CODEWITHSUNDEEP
javascriptjquerycsstransition
user2811083
user2811083

Reputation: 83

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

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

Upvotes: 3

Views: 4356

Answers (2)

WreithKassan
WreithKassan

Reputation: 215

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.

Upvotes: 1

Shomz
Shomz

Reputation: 37691

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:

Upvotes: 2

Related Questions