CSS中的动画效果

1.动画的声明@keyframes name

---

动画声明需要使用@keyframes name,后面的name是人为定义的动画名称

@keyframes move {

0% {

transform: translate(0, 0);

}

25% {

transform: translate(1000px, 0px);

}

50% {

transform: translate(1000px, 400px);

}

75% {

transform: translate(0px, 400px);

}

100% {

transform: translate(0, 0);

}

}

2.动画的动作{}

---

在以上代码中,{}内包含的就是动画的动作,每一个完整的动画都会一定的时间，其中

意思是每达到时间的百分之多少就向某状态进行转变。

三、动画属性

========================================================================

1.代码示例

---

2.效果展示

---

四、项目案例

========================================================================

①奔跑的小熊

---

②城市热点图

---