Javascript 微软徽标动画v2

我更新了我对微软标志的理解。可以在网上买到。总的来说，除了一件事，我现在对它很满意

我似乎不知道如何停止动画，使标志看起来正确。我尝试将延迟设置为6000ms=6s=动画的长度，但看起来有点不对劲。现在设定为5900毫秒。有什么建议吗

我想知道的另一件事是，你会如何让YouTube视频在一段时间后播放，比如当文本出现时？谢谢

var playState='-webkit动画播放状态'；
$（“.box”）.css（播放状态，“运行”）；
setTimeout（函数（）{
$（“.box”）.css（播放状态，“暂停”）；
}, 5900);
正文{
背景：hsl（30,20%，20%）；
颜色：#fff；
字体系列：“开放式Sans”，无衬线；
}
.盒子{
-webkit动画：徽标6s 1向前；
动画：标志6S1向前；
位置：绝对位置；
}
.盒子{
-webkit动画：缩放1.5s立方贝塞尔（.1.95.7.8）4；
动画：缩放1.5s立方贝塞尔（.1.95.7.8）4；
高度：50px；
宽度：50px；
}
.品牌{
-webkit动画：Fadein2s轻松向前4.5s；
动画：fadein 2s向前移动4.5秒；
显示：内联；
字体大小：36px；
利润率：24px0；
不透明度：0；
位置：相对位置；
顶部：-36px；
文本对齐：居中；
z指数：0；
}
.flex{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
最小高度：100vh；
-webkit柔性方向：列；
弯曲方向：立柱；
证明内容：中心；
}
.介绍{
文本对齐：居中；
}
.标志{
-webkit动画：向左移动。5s线性向前移动4.5s；
动画：向左移动。5s线性向前移动4.5s；
显示：内联块；
高度：100px；
左：100px；
保证金：0自动；
位置：相对位置；
宽度：100px；
z指数：1；
}
.玩家{
显示：无；
}
#绿色{背景：#7cbb00；}
#黄色{背景：#ffbb00；}
#蓝色{背景：#00a1f1；}
#红色{背景：#f65314；}
#animateGreen{动画延迟：4.5s；}
#动画延迟{动画延迟：3s；}
#动画蓝色{动画延迟：1.5s；}
#已设置动画的{动画延迟：0s；}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}
@关键帧标志{
0%{左：0px；上：0px；变换：旋转（0deg）}
25%{左：50px；上：0px；变换：旋转（-180度）}
50%{左：50px；顶：50px；变换：旋转（-360度）}
75%{左：0px；上：50px；变换：旋转（-540deg）}
100%{左：0px；上：0px；变换：旋转（-720deg）}
}
@关键帧向左移动{
从{右填充：0；左填充：100px；}
到{右填充：50px；左填充：0；}
}
@关键帧缩放{
0%，100%{变换：比例（1）}
50%{变换：比例（.5）}
}

微软
更好的方法不是使用jQuery/JavaScript停止动画，而是为每个以它们结尾的框指定一个不同的动画


至于在文本出现时播放YouTube视频，如果您参考YouTube，在jQuery中可能会是这样：

setTimeout(function(){
    //play the youtube video (#playerId) is the id of your youtube video element
    $('#playerId').get(0).playVideo();
} , 4500); //4500 is the delay in ms

谢谢你，伙计！我想我是想不写额外的动画来提高效率。谢谢