I made some changes to my Microsoft logo animation project. You can view the updated version on CodePen. Overall, I'm pretty happy with how it turned out except for one issue.
I'm struggling to determine the right timing to end the animation so the logo appears correct. I attempted to set the delay to 6000ms, which is the length of the animation, but it didn't look right. Right now, it's set to 5900ms. Any suggestions on how to address this?
Additionally, I'm curious about how to make a YouTube video start playing after a specific time, like when the text is displayed. Any advice on this?
var playState = '-webkit-animation-play-state';
$(".boxes").css(playState, "running");
setTimeout(function() {
$(".boxes").css(playState, "paused");
}, 5900);body {
background: hsl(30, 20%, 20%);
color: #fff;
font-family: 'Open Sans', sans-serif;
}
.boxes {
-webkit-animation: logo 6s 1 forwards;
animation: logo 6s 1 forwards;
position: absolute;
}
.box {
-webkit-animation: scaling 1.5s cubic-bezier(.1,.95,.7,.8) 4;
animation: scaling 1.5s cubic-bezier(.1,.95,.7,.8) 4;
height: 50px;
width: 50px;
}
.brand {
-webkit-animation: fadein 2s ease 4.5s forwards;
animation: fadein 2s ease 4.5s forwards;
display: inline;
font-size: 36px;
margin: 24px 0 0 0;
opacity: 0;
position: relative;
top: -36px;
text-align: center;
z-index: 0;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
min-height: 100vh;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: center;
}
.intro {
text-align: center;
}
.logo {
-webkit-animation: moveLeft .5s linear 4.5s forwards;
animation: moveLeft .5s linear 4.5s forwards;
display: inline-block;
height: 100px;
left: 100px;
margin: 0 auto;
position: relative;
width: 100px;
z-index: 1;
}
.player {
display:none;
}
#green {background: #7cbb00;}
#yellow {background: #ffbb00;}
#blue {background: #00a1f1;}
#red {background: #f65314;}
#animateGreen {animation-delay: 4.5s;}
#animateYellow {animation-delay: 3s;}
#animateBlue {animation-delay: 1.5s;}
#animateRed {animation-delay: 0s;}
@keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes logo {
0% {left: 0px; top: 0px; transform: rotate(0deg)}
25% {left: 50px; top: 0px; transform: rotate(-180deg)}
50% {left: 50px; top: 50px; transform: rotate(-360deg)}
75% {left: 0px; top: 50px; transform: rotate(-540deg)}
100% {left: 0px; top: 0px; transform: rotate(-720deg)}
}
@keyframes moveLeft {
from {padding-right: 0; left: 100px;}
to {padding-right: 50px; left: 0;}
}
@keyframes scaling {
0%, 100% {transform: scale(1)}
50% {transform: scale(.5)}
}<head><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></head>
<div class="flex">
<div class="intro">
<div class="logo">
<div class="boxes" id="animateGreen">
<div class="box" id="green">
</div>
</div>
<div class="boxes" id="animateYellow">
<div class="box" id="yellow">
</div>
</div>
<div class="boxes" id="animateBlue">
<div class="box" id="blue">
</div>
</div>
<div class="boxes" id="animateRed">
<div class="box" id="red">
</div>
</div>
</div>
<div class="brand">
Microsoft
</div>
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/I3Ak5VgyEoc?autoplay=1" class="player"></iframe>