页面加载CSS3过渡

Question

我有这个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脚本，但是不幸的是，它们似乎都没有起作用。 任何帮助将不胜感激。

Answer 1

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

添加此JavaScript

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

Answer 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%);
  }
}