2016-05-05 13 views
2

Ich bin neu in CSS3 Animationen und eine Animation, die ich mag here. Leider existiert die Animation in einer jQuery Easing-Bibliothek, die eine Abhängigkeit von jQuery haben würde, was mein aktuelles Projekt nicht tut.Wie sieht der Keyframe-Code aus wie diese Animation?

Wie würde ich diese Animation mithilfe von CSS3-Keyframes implementieren, um die Breite eines div zu animieren?

Antwort

3

Sie müssen sich an den Extrempunkten in den Werten suchen, und verwenden Sie diese als Schlüsselbild Auch, achten Sie auf die verschiedenen Zeitfunktionen

.test { 
 
    width: 300px; 
 
    height: 40px; 
 
    background-color: lightgreen; 
 
    animation: grow 5s infinite; 
 

 
} 
 

 
@keyframes grow { 
 
    0% {width: 100px; animation-timing-function: ease-in} 
 
    30% {width: 600px; animation-timing-function: ease-out} 
 
    45% {width: 400px; animation-timing-function: ease-in} 
 
    60% {width: 600px; animation-timing-function: ease-out} 
 
    70% {width: 500px; animation-timing-function: ease-in} 
 
    84% {width: 600px; animation-timing-function: ease-out} 
 
    92% {width: 550px; animation-timing-function: ease-in} 
 
100% {width: 600px; animation-timing-function: ease-out} 
 
    
 
}
<div class="test"></div>

0

CSS würde wie folgt aussehen:

.slide-width { 
     animation: slide-width 3s linear 0s forwards; 
     -webkit-animation: slide-width 3s linear 0s forwards; 
} 

und die Keyframes würde so etwas wie dieses:

@-webkit-keyframes slide-width { 
    0% {width:50px} 
    100% {width:100px} 
} 
@keyframes slide-width { 
    0% {width:50px} 
    100% {width:100px} 
} 
Verwandte Themen