Skip to content

Instantly share code, notes, and snippets.

@mrsize

mrsize/css-transition-with-delay-in-js.html

Last active February 12, 2020 14:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrsize/022b97fbb2e2e94c7181c9f005d20d23 to your computer and use it in GitHub Desktop.
Save mrsize/022b97fbb2e2e94c7181c9f005d20d23 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Transition with Javascript (No jQuery)
Raw
css-transition-with-delay-in-js.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transition with Javascript (No jQuery)</title>
<style type="text/css">
a{color: inherit;}
/* Original state : */
.message
{
display: block;
transform: translateY(10vh);
opacity: 0;
color:#000;
}
/* Final state : */
.message_animated
{
transform: translateY(0px);
opacity: 1;
}
</style>
</head>
<body>
<div class="site">
<div class="message" data-anim-start="3000" data-anim-duration="500">
<span>Bonjour, voici mon message <a href="#">Lire la suite</a></span>
</div>
</div>
<script type="text/javascript">
// Targeted div :
const the_div = document.querySelector(".message");
// Get Data Attributes :
const start_time = the_div.getAttribute("data-anim-start");
const duration = the_div.getAttribute("data-anim-duration");
setTimeout(function(){
// Start the animation :
the_div.classList.add('message_animated');
// Transition :
const transition = "all " + duration + "ms ease-in-out";
// Apply transitions :
the_div.style.webkitTransition = transition;
the_div.style.MozTransition = transition;
the_div.style.msTransition = transition;
the_div.style.OTransition = transition;
the_div.style.fransition = transition;
}, start_time);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment