Demo/bin/Debug/front_end/animation/animationTimeline.css

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

/*
 * Copyright (c) 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.animation-node-row {
    width: 100%;
    display: flex;
    border-bottom: 1px dashed #ccc;
}

.animation-node-description {
    display: inline-block;
    min-width: 200px;
    max-width: 200px;
    padding-left: 15px;
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    line-height: 40px;
}

.animation-node-row:nth-child(odd) {
    background-color: hsla(0, 0%, 0%, 0.05);
}

.animation-timeline-row {
    height: 40px;
    position: relative;
}

path.animation-keyframe {
    fill-opacity: 0.3;
}

line.animation-line {
    stroke-width: 2px;
    stroke-linecap: round;
    fill: none;
}

line.animation-delay-line {
    stroke-width: 2px;
    stroke-dasharray: 6, 4;
}

circle.animation-endpoint, circle.animation-keyframe-point {
    stroke-width: 2px;
}

circle.animation-endpoint, circle.animation-keyframe-point {
    transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
    transform: scale(1);
    transform-origin: 50% 50%;
}

circle.animation-endpoint:hover, circle.animation-keyframe-point:hover {
    transform: scale(1.2);
}