Detaillierte Erläuterung der Verwendung von Animationsattributen in CSS3

Bevor wir mit der Einführung von Animation beginnen, müssen wir zunächst etwas Besonderes verstehen, nämlich „Keyframes“. Wir nennen es „Keyframes“. Werfen wir einen Blick darauf, was diese „Keyframes“ sind. Als wir zuvor den Übergang verwendet haben, um einen einfachen Übergangseffekt zu erstellen, haben wir die Anfangsattribute und Endattribute, eine Startaktionszeit und eine Fortsetzungsaktionszeit sowie die Transformationsrate der Aktion einbezogen. Tatsächlich sind es diese Werte Wenn wir möchten, ist die Steuerung detaillierter, z. B. welche Aktionen möchte ich im ersten Zeitraum ausführen und welche Aktionen möchte ich im zweiten Zeitraum ausführen (was bedeutet der Wechsel zu Flash?). Aktionen, die ich im ersten Frame ausführen möchte, und welche Aktionen ich im zweiten Frame ausführen möchte (welche Aktion), ist es für uns schwierig, Transition zu verwenden, um dies zu erreichen. Zu diesem Zeitpunkt benötigen wir auch einen solchen „Schlüsselrahmen“. zu kontrollieren. Dann verwendet CSS3 Animation das Attribut „keyframes“, um diesen Effekt zu erzielen. Werfen wir zunächst einen Blick auf Keyframes:

Keyframes haben ihre eigenen Syntaxregeln und ihr Name wird durch „@key

<br/>

frames“ angegeben. am Anfang, gefolgt vom „Namen der Animation“ und einem Paar geschweifter Klammern „{}“. In den Klammern stehen einige Stilregeln für verschiedene Zeiträume, ähnlich wie wir CSS-Stile schreiben. Für eine Stilregel in „@keyframes“, die aus mehreren Prozentsätzen besteht, beispielsweise zwischen „0 %“ und „100 %“, können wir in dieser Regel mehrere Prozentsätze erstellen und jedem Prozentsatz ein Element mit Animationseffekten zuweisen mit unterschiedlichen Attributen hinzugefügt werden, sodass die Elemente einen sich ständig ändernden Effekt erzielen können, z. B. Verschieben, Elementfarbe, Position, Größe, Form usw. ändern. Eines ist jedoch zu beachten: Wir können „fromt“ und „to“ verwenden " stellt dar, wo eine Animation beginnt und endet. Mit anderen Worten, „von“ entspricht „0 %“ und „bis“ entspricht „100 %“. Es ist erwähnenswert, dass „0 %“ unter diesen nicht weggelassen werden darf Das Prozentzeichen muss wie bei anderen Attributwerten hier hinzugefügt werden. Andernfalls sind unsere Keyframes ungültig und haben keine Wirkung. Denn die Einheit Keyframes akzeptiert nur Prozentwerte. <br/>

<br/>

Keyframes können in beliebiger Reihenfolge angegeben werden, um die Schlüsselposition der Animationsanimationsänderung zu bestimmen. Die spezifischen Grammatikregeln lauten wie folgt:

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';   
 keyframes-blocks: [ keyframe-selectors block ]* ;   
 keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*

Setzen Sie die obige Grammatik zusammen

@keyframes IDENT {   
     from {   
       Properties:Properties value;   
     }   
     Percentage {   
       Properties:Properties value;   
     }   
     to {   
       Properties:Properties value;   
     }   
   }  
   或者全部写成百分比的形式：

@keyframes IDENT {   
   0% {   
      Properties:Properties value;   
   }   
   Percentage {   
      Properties:Properties value;   
   }   
   100% {   
      Properties:Properties value;   
   }   
 }

Darunter ist IDENT ein zufälliger Name Natürlich wird es semantischer sein. Prozent ist ein Prozentwert. Eigenschaften sind der Eigenschaftsname von CSS, wie z. B. links, Hintergrund usw., und Wert ist der Attributwert der entsprechenden Eigenschaft . Es ist erwähnenswert, dass unser Von und Bis jeweils 0 % und 100 % entsprechen. Wir haben dies bereits erwähnt. Bisher unterstützen nur Browser mit Webkit-Kern Animationsanimationen, daher muss ich oben das Präfix -webkit hinzufügen. Es wird gesagt, dass Firefox5 die Animationsanimationseigenschaft von CSS3 unterstützen kann.

Sehen wir uns ein Beispiel an:

@-webkit-keyframes 'test' {   
     0% {   
        margin-left: 100px;   
        background: green;   
     }   
     40% {   
        margin-left: 150px;   
        background: orange;   
     }   
     60% {   
        margin-left: 75px;   
        background: blue;   
     }   
     100% {   
        margin-left: 100px;   
        background: red;   
     }   
  }

Hier definieren wir eine Animation namens „Test“. Ihre Animation beginnt bei 0 % und endet bei 100 %, und sie geht auch durch Es gibt zwei Prozesse von 40 % und 60 %. Die spezifische Bedeutung des obigen Codes ist: Wenn die Testanimation 0 % beträgt, wird das Element an der linken Position von 100 Pixel positioniert, die Hintergrundfarbe ist grün und dann bei 40 %. , das Element wechselt zur linken Position von 150 Pixel und die Hintergrundfarbe ist grün. Bei 60 % wechselt das Element zur linken Position von 75 Pixel und die Hintergrundfarbe ist schließlich blau endet bei 100 %, das Element kehrt zum Startpunkt zurück, wo links 100 Pixel sind, und die Hintergrundfarbe wird rot. Angenommen, wir geben dieser Animation nur 10 Sekunden Ausführungszeit, dann ist der Ausführungsstatus jedes Segments wie folgt:

201586182405067.png (499×536)

<br/>

Nachdem Keyframes definiert sind, wie müssen wir die soeben definierte Animation als „Test“ bezeichnen?

<br/>

CSS3-Animation ähnelt dem Übergangsattribut, sie sind alle willkürlich Ändern Sie den Attributwert des Elements im Laufe der Zeit. Der Hauptunterschied zwischen ihnen besteht darin, dass ein Übergang ein Ereignis (Hover-Ereignis oder Klick-Ereignis usw.) auslösen muss, um seine CSS-Eigenschaften im Laufe der Zeit zu ändern. Die Animation kann das CSS des Elements im Laufe der Zeit auch explizit ändern, ohne dass ein Ereignis ausgelöst wird ein Animationseffekt. Auf diese Weise können wir die Animationsattribute in einem Element direkt aufrufen. Basierend darauf erfordert die CSS3-Animation klare Animationsattributwerte. Wir benötigen Keyframes, um CSS zu unterschiedlichen Zeiten zu definieren ​​Erzielen Sie die Wirkung von Elementen, die sich in verschiedenen Zeiträumen ändern.

<br/>

Sehen wir uns an, wie das Animationsattribut für ein Element aufgerufen wird

.demo1 {   
     width: 50px;   
     height: 50px;   
     margin-left: 100px;   
     background: blue;   
     -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/  
     -webkit-animation-duration: 10s;/*动画持续时间*/  
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/  
     -webkit-animation-delay: 2s;/*动画延迟时间*/  
     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/  
     -webkit-animation-direction: alternate;/*定义动画方式*/  
  }

CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。如上面例子：因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距，其默认值是：margin-left:100px;background: blue；但当我们在执行动画0%时，margin-left:100px,background:green；当执行到40%时，属性变成了：margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时：margin-left:100px;background: red;此时动画将完成，那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果，只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样，最后出现的权根是最大的。当动画结束后，样式回到默认效果。

 以上就是CSS3中animation属性的使用详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！