Rumah > Artikel > hujung hadapan web > CSS3 - @keyframes
CSS3 - @keyframes
- 零下一度asal
- 2017-06-29 11:54:071521semak imbas
语法
@keyframes animationname {keyframes-selector {css-styles;}}| 值 | 描述 |
| animationname | 必需。定义动画的名称。 |
| keyframes-selector |
必需。动画时长的百分比。 合法的值：
|
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
定义和用法
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
浏览器支持
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
例：
<!DOCTYPE html><html><head><style>
div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /* Firefox */-webkit-animation:mymove 5s infinite; /* Safari and Chrome */-o-animation:mymove 5s infinite; /* Opera */}@keyframes mymove{0% {top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75% {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}
@-moz-keyframes mymove{ /* Firefox */0%
{top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75% {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}
@-webkit-keyframes mymove { /* Safari and Chrome */0%
{top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50%
{top:100px; left:100px; background:yellow;}75%
{top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}
@-o-keyframes mymove {/* Opera */0% {top:0px; left:0px; background:red;}25%
{top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75%
{top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}</style>
</head><body><p><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div>
</body>
</html>
Atas ialah kandungan terperinci CSS3 - @keyframes. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)_javascript技巧Artikel seterusnya：移动端动态设置字体大小的实例详解