@keyframes规则

Posted icyyyy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了@keyframes规则相关的知识,希望对你有一定的参考价值。

1. 定义:

@keyframes animationname {keyframes-selector {css-styles;}}

2. 实例:

 1 /* 动画代码 */
 2 @keyframes example {
 3   from {background-color: red;}
 4   to {background-color: yellow;}
 5 }
 6 
 7 /* 向此元素应用动画效果 */
 8 div {
 9   width: 100px;
10   height: 100px;
11   background-color: red;
12   animation-name: example;
13   animation-duration: 4s;
14 }

 

以上是关于@keyframes规则的主要内容,如果未能解决你的问题,请参考以下文章

text CSS @keyframes规则

CSS3@keyframes规则和animation动画

CSS3 动画

css3 中@keyframes 的用途

CSS 动画总结

css-@keyframes动画