Snap Builder HTML5 CSS3 Free Public Codes Library


<html>
<head>
<title>CSS3 Transition Callback</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<style>
#snap_word {width:600px;text-align:center;position:absolute;opacity:0;left:50%;top:0;margin-left:-250px;font-family:Arial;font-size:50px;color:#007730;}
#snippet {font-family:Arial;font-size:100%;}
</style>

</head>
<body>

<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_244.html">CSS3 Transition Callback</a> page. ]
</div>

<div id="snap_word">CSS3 Transition Callback</div>

</body>

<!-- Download the motion.js file from: https://github.com/usablica/motion.js/blob/master/motion.js -->
<script src="http://snapbuilder.com/code_snippets/view_code_example/css/transitions/motionJS/motion.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
/* Begin CSS3 Transition Callback
== This Script Free To Use Providing This Notice Remains ==
== This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library ==
== NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply ==
== Created by: Usabli.ca : https://github.com/usablica : Creative Commons License ==
*/
motionJs.transition({
select:"#snap_word",
duration:'5s',  // each 1s = 1 second
style:{
top:'200px',
opacity:1
},
end:function(event) {
alert("End of transition demo."); // remove this line if no alert needed
}
});
// -->
</script>

</html>