©
This document usesPHP Chinese website manualRelease
@keyframes
@keyframes定义的动画名称用来被animation-name所使用。
定义动画时,简单的动画可以直接使用关键字from和to,即从一种状态过渡到另一种状态:
示例代码:
@keyframes testanimations { from { opacity: 1; } to { opacity: 0; } }
其中testanimations是该动画的名字,该动画表示某个东西将逐渐消失。
如果复杂的动画,可以混合
示例代码:
@keyframes testanimations { from { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20); } 80% { transform: translate(80px, 0); } to { transform: translate(100px, 20px); } }
当然,也可以不使用关键字from和to,而都使用
示例代码:
@keyframes testanimations{ 0% { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20px); } 80% { transform: translate(80px, 0); } 100% { transform: translate(100px, 20px); } }
注意,这里的0%不能简写成0,0是非标准语法(虽然被某些浏览器所支持)。
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
6.0-9.0 | 2.0-4.0 | 4.0-43.0 -webkit- |
3.1-3.2 | 15.0-29.0 -webkit- |
3.2-8.1 -webkit- |
2.1-3.0 -webkit- |
18.0-40.0 -webkit- |
10.0+ | 5.0-15.0 -moz- |
4.0-8.1 -webkit- |
4.0+ -webkit- |
||||
16.0 |