动画(CSS3)
程序员文章站
2022-06-23 15:06:47
...
- 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。*
-
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; - 注：
动画名称是自定义的；
一般只写前两个属性值：动画名称 动画时间 ；
运动曲线：ease默认；
播放次数：有animation-iteration-count:infinite;无限循环；
animation-direction:normal / reverse反向 / alternate正反方向交替进行;
animation-play-state:paused; 暂停动画 - 定义动画：
@keyframes 动画名称{
from{开始位置}//0%
to{结束位置}//100%
}
- 多组动画：百分比任意设置
eg.小汽车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>car</title>
<style>
img{
animation: car 5s infinite;
margin:100px auto;
}
@keyframes car {
0%{
transform: translate3d(0,0,0);
}
50%{
transform: translate3d(1000px,0,0);
}
51%{
transform: translate3d(1000px,0,0) rotateY(180deg);
}
100%{
transform: translate3d(0,0,0) rotateY(180deg);
}
}
</style>
</head>
<body>
<img src="images/car.jpg" width="200"/>
</body>
</html>
原图小汽车
没有GIF QAQ
如果有多组变形都属于transform，用空格隔开即可。
上一篇： 北京避暑好去处 北京夏天好去处推荐
下一篇： css3动画