web-dev-qa-db-ja.com

Chrome Devtoolsを使用してCSSアニメーションをデバッグする

Transition-cssアニメーションで単一の要素が実行するステップを表示またはデバッグすることは可能ですか？私はChrome Dev Toolsを使用していますが、それはかなり初心者です。グーグルしてタイムラインから何かを見ましたが、段階的なものを見つけることができません。

私のアニメーションは0％から始まり、100％に行きますが、50％のステップは宣言されていませんが、50％あたりに何か奇妙なことがあるようです。だから何が起こっているのか見たいのです。

cssgoogle-chromedebugginggoogle-chrome-devtoolstransitions
22
FredVDH

はい、可能です。

Chrome DevToolsを使用して、遷移とCSSアニメーションをデバッグできます。このボタンをクリックするだけです。

Image describing the location of the "Animations" tab activation button

次に、[アニメーション]タブがコンソールパネルに表示されます（このボタンを押すと、 Esc DevToolsに集中している場合-DevToolsをクリックして集中します）：

enter image description here

23
user3638471

少し調べてみたところ、現在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のデバッグサポートが優れているようです）を使用するオプションもあります。

8
alex

ダウンロードChrome Canary をクリックすると、新しいアニメーションコントロール機能にアクセスできます。動作をプレビューするには、このビデオをご覧ください。

https://vimeo.com/116038639

2
ylerjen

最終更新日：2018年1月11日。

Chrome DevTools Animation Inspector には2つの主な目的があります。

  1. アニメーションの検査。アニメーショングループのソースコードをスローダウン、再生、または検査したい。
  2. アニメーションの変更。アニメーショングループのタイミング、遅延、継続時間、またはキーフレームオフセットを変更したい。 ベジェ編集とキーフレーム編集は現在サポートされていません。

例えばキーフレームでCSS 2D変換のスケールメソッドの値を変更することはできません。以下のスニペットを実行してみてください：

.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>

Animation Inspectorは、CSSアニメーション、CSSトランジション、およびWebアニメーションをサポートしています。 requestAnimationFrameアニメーションは現在サポートされていません。

1
kolunar