加载页面上的 CSS3 过渡答案

【问题标题】：CSS3 transition on page loaded加载页面上的 CSS3 过渡
【发布时间】：2017-06-12 02:46:44
【问题描述】：

我有这个 CSS 代码：

    <!-- language: css -->    
    div.slider {
        transition: 2.5s cubic-bezier(.25,.77,.74,.24);
        clip-path: polygon(0 0, 1% 0, 1% 100%, 0% 100%);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: 50% 0%;
        background-color: #ccc;
        border: 1px solid;
        width: 100%;
        height: 100%;
        padding: auto;
        margin: auto;
        z-index: 1;
        position: absolute;  
    }

    div.slider:hover {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

还有这段 HTML 代码：

    <!-- language: html -->
    <div class="slider" id="slider">
        <img src="http://i.stack.imgur.com/r5CAq.jpg" alt="Mountain View" style="width:100%;height:100%;">
    </div>

我希望动画不是在:hover 上开始，而是在页面加载后立即开始。我能够找到一些应该实现这一目标的 JS 脚本，但不幸的是，它们似乎都不起作用。任何帮助将不胜感激。

【问题讨论】：

标签： javascript css transition

【解决方案1】：

从 HTML class="slider" 中删除类。

添加此 JavaScript

window.onload = function() {
    document.getElementById('slider').classList.add('slider');
}

【讨论】：

【解决方案2】：

我认为您正在寻找带有剪辑路径的 css 动画。参见：https://codepen.io/SitePoint/pen/KzLbGe 示例（注意，我已阅读动画中的起点和终点的数量必须相同才能生效）

所以，你从 css 开始，就像你的初始状态：

.slider {
    transition: 2.5s cubic-bezier(.25,.77,.74,.24);
    clip-path: polygon(0 0, 1% 0, 1% 100%, 0% 100%);
    animation: clippath;
    animation-fill-mode: forwards;
}

然后添加您的动画状态，例如：

@keyframes clippath {
  25% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

【讨论】：