2017-06-11 8 views
0

ich diesen CSS-Code haben:CSS3 Übergang auf Seite geladen

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

und HTML-Code:

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

Und ich möchte, dass die Animation nicht auf :hover starten, sondern sobald die Seite lädt. Ich konnte einige JS-Skripte finden, die das erreichen sollen, aber leider scheint keiner von ihnen zu funktionieren. Jede Hilfe wird geschätzt.

Antwort

2

Entfernen Sie die Klasse aus dem HTML class="slider".

Dieses JavaScript

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

Ich glaube, Sie mit Clip-Pfad für eine CSS-Animation suchen. sehen Sie: https://codepen.io/SitePoint/pen/KzLbGe für ein Beispiel (Hinweis, ich habe gelesen, dass die Anzahl der Start- und Endpunkte in der Animation identisch sein muss, damit es gültig ist)

so beginnen Sie mit css wie Ihr Ausgangszustand:

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

dann fügen Sie Ihre Animation Staaten wie:

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