是否可以查看或调试单个元素在过渡 CSS 动画中所采取的步骤? 我正在使用 Chrome 开发工具,但我对此还很陌生。我用谷歌搜索并从时间线上看到了一些东西,但我没有找到一步一步的东西。
我的动画从 0% 开始,到 100%,但在 50% 附近似乎有些奇怪,尽管 50% 的步长没有声明。这就是为什么我想看看发生了什么。
经过一些研究,目前使用 Chrome DevTools 似乎无法实现这一点。 以下是我发现的一些随机信息:
animation-play-state
属性来暂停动画:
.paused {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
<canvas>
动画(显然 Chrome DevTools 具有更好的调试支持)。
Chrome DevTools 动画检查器检查动画。您想要放慢速度、重播或检查 动画组的源代码。
.animates {
animation-timing-function: ease-out;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.wrapper {
position: relative;
margin-top: 10px;
}
.btn-overlay {
animation-name:grow;
-webkit-animation-name:grow;
position: absolute;
width: 50%;
top: 0;
left: 27%;
}
@keyframes grow {
0%{
transform: scale(1.0);
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
left: 27%;
}
80% {
transform: scale(1.0);
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
left: 27%;
}
90% {
transform: scale(1.04);
-moz-transform: scale(1.04);
-webkit-transform: scale(1.04);
left: 27.5%;
}
100%{
transform: scale(1.0);
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
left: 27%;
}
}
.button{
background-color: #f49a22!important;/* Old browsers */
background: -moz-linear-gradient(left, #efaf00 0%, #dd5c00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #efaf00 0%,#dd5c00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #efaf00 0%,#dd5c00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efaf00', endColorstr='#dd5c00',GradientType=1 ); /* IE6-9 */
box-shadow: 0px 3px 6px rgba(156, 116, 86, 0.4);
display: inline-block;
color: white;
padding: 0 14px;
height: 30px;
border-radius: 80px!important;
font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="wrapper">
<div class="animates btn-overlay">
<input type="submit" value="SIGN UP HERE!" name="subscribe" class="button">
</div>
</div>
</body>
</html>
动画检查器支持 CSS 动画、CSS 过渡和 Web 动画。
requestAnimationFrame
目前不支持动画。