アニメーション映画は
一つ破壊CSS3機能で正確に制御することができる、又は映画のグループは、共通の複数のノードは、複雑なアニメーションを提供することによって達成されます。
構文:
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
(名前、アニメーション時間遅延に加えて、他のランダムな順序の厳格な要件があります)
@keyframes 动画名称 {
from{ 开始位置 } /*0%*/
to{ 结束 } /*100%*/
}
アニメーションの繰り返しカウント:無限、無限ループ
アニメーションプレイ状態は:一時停止;仮死状態を"
ケース:
img {
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
animation: car 5s infinite; /*引用动画*/
}
/*定义动画*/
@keyframes car {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(1000px, 0, 0);
}
51% {
transform: translate3d(1000px, 0, 0) rotateY(180deg);
/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
}
99% {
transform: translate3d(0, 0, 0) rotateY(180deg);
/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
}
}