I was experimenting with creating a simple transform transition animation using css and js, so I wrote the following code:
(test page)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin:0;padding:0;
}
body{
background-color:#000;
}
.fly-in-text{
list-style:none;
position:absolute;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
}
.fly-in-text li{
display:inline-block;
color: #d98c12;
margin-right:50px;
font-family:Open Sans,Arial;
font-weight:300;
font-size:4em;
transition: all 2.5s ease;
}
.fly-in-text li:last-child{
margin-right:0;
}
.fly-in-text.hidden li{
opacity:0;
}
.fly-in-text.hidden li:nth-child(1){ transform: translateX(-200px) translateY(-200px); }
.fly-in-text.hidden li:nth-child(2){ transform: translateX(20px) translateY(-20px); }
.fly-in-text.hidden li:nth-child(3){ transform: translateX(-150px) translateY(-80px); }
.fly-in-text.hidden li:nth-child(4){ transform: translateX(-150px) translateY(-200px); }
.fly-in-text.hidden li:nth-child(5){ transform: translateX(10px) translateY(-200px); }
.fly-in-text.hidden li:nth-child(6){ transform: translateX(-300px) translateY(200px); }
.fly-in-text.hidden li:nth-child(7){ transform: translateX(20px) translateY(-20px); }
</style>
</head>
<body>
<ul class="fly-in-text hidden">
<li>W</li>
<li>E</li>
<li>L</li>
<li>C</li>
<li>O</li>
<li>M</li>
<li>E</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
setTimeout(function(){
$('.fly-in-text').removeClass('hidden');
},500);
})();
</script>
</body>
</html>
After testing this animation on a standalone test page, I tried integrating it into my main site which uses Bootstrap. However, when I added the codes to my main site, the animation stopped working. Here is an excerpt from my main site code:
(main site)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Daygostar Home Page</title>
<link href="css/fly-text.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Other meta tags and script imports -->
</head>
<!-- Rest of the main site page structure -->
Upon removing the line that connects the Bootstrap CSS file, the text transition worked perfectly on my main site. This raised the question of why adding Bootstrap CSS caused the animation to fail.
I have saved the styles required for text transforms in a separate file named 'fly-text.css'.
The javascript part from the test page has been correctly included in the main site.