I am trying to find out a better way to delay myFunction.As you see i animated this image to fade in and when i click on it i trigger a new animation such as slideleft and at the end of this animaton i call myFunctionContinued delayed about 5 sec until my animaton is completed and link is opened.I dont think is a clever way to do that and i would like your suggestions!
All code is here jsfidle
HTML just a div with id and class fadein
<div id="object4" class="fadeIn">
<a id="myLink" href="#" onclick="myFunction();return false;"><img class="img4" src="http://imageshack.com/a/img89/1871/deqz.png"></a></div>
CSS and keyframes fadein and slideleft
<style>
body{
background-color:black;
width:800px;
}
img.img4{
width: 300px; height: 200px;
transform:translate(550px,150px);
}
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/*
==============================================
slideLeft
==============================================
*/
.slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-fill-mode: forwards;
animation-duration: 4s;
-webkit-animation-duration: 4s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes slideLeft {
0% {
transform: translateX(40%);
}
90% {
transform: translateX(-3%);
}
100% {
transform: rotate(-130deg) translate(-430px,60px);
}
/*from {transform: translateX(40%);}
to {transform: translateX(-3%);}*/
}
</style>
Function click on object4 trigger animation slideleft wait 5 sec call continuedfunction and open the link in the same window
<script>
function myFunction()
{
$('#object4').click(function() {
$(this).addClass("slideLeft");
});
setTimeout(myFunctionContinued, 5000);
}
function myFunctionContinued(){
window.open("http://www.w3schools.com",'_self',false);}
</script>
Keyframes style photo isnt the final result of my animation that i want to focus is the way as i said to delay.
Thanks for your time!
There's an event which fires when a CSS3 animation completes (from: http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end
object4.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {
// code to execute after transition ends
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.