css3动画属性——会自己动的页面

在我们的css3中有许多的知识，今天我要给大家说的就是我们css3中关于动画的属性！
相信大家应该都知道hover的用法吧，hover可以让一个元素在用鼠标滑过的时候会产生我们所写的样式变化，但是大家知道，hover需要我们的鼠标去滑过的时候才会发生变化，那么有没有办法让它不用鼠标时，它会自己进行一些样式的改变呢？这就是我们css3动画的一个属性animation！
animation的特点就是，它不需要事件来进行触发，调用关键帧即可。那就有人问了，关键帧是什么？
怎么用关键帧。首先，关键帧需要我们自己来给它定义名称，这就需要用上我们的@keyframes！
制定关键帧的方法：
1. @keyframes（中间空格）关键帧名称{
from{
}
to{
}
}
2. @keyframes（中间空格）关键帧名称{
0%{
}
50%{
}
100%{
}
}
这就是我们制定关键帧的方法，通常我们用的第二种方法,第一种方法用的会很少,下面也有我自己的一些笔记，大家也可以看一看：

当我们制定好关键帧后，怎么将他用到我们需要用的地方呢，这就是一开始我们说的animation属性的用武之地，谁需要使用关键帧，就给谁加animation属性，大家要记住，谁需要就给谁加！！！！
接下来我们就具体来说说animation属性的属性值有哪些，animation是一个复合属性，第一个叫做animation-name（它叫做关键帧的名称，也就是我们制定关键帧时给关键帧去的名称，我们只需加上那个名称便可）

第二个叫animation-duration（它叫做动画的持续时间，也就是从它到我们需要它变为什么样所要用的时间为多少，我们可以使用s(秒）ms（毫秒），同样加上即可）

第三个叫animation-timing-function（它叫动画运用类型，有加速，匀速，减速等等…即他在变化过程中的速度类型是什么样的,它的默认值可不是匀速,也不是减速,而是先加速后减速!但是他有一个需要注意的,就是一个step-start属性值,他的意思是没有动画中间的过渡效果,直接跳到每一帧的地方,可以理解为瞬移,闪现!）

第四个叫animation-delay(它叫做动画的延迟时间,也就是加上这个以后,需要在这个时间后,动画才会开始变化,他和动画持续时间的单位一样s ,ms)

第五个叫animation-iteration-count(它是指动画运动的次数,在默认情况下只运动一次,加上infinite那他就会无限循环)

第六个叫animation-direction(他是指运动方向,通常就是按照正常方向走,如果需要有另类的走法,它也有一些属性值,reverse是反方向运行,alternate是先正常再反向,alternate-reverse是先反向再正常)

第七个叫animation-play-state(是用来设置动画运动的状态,他有两个属性值,一个叫paused（暂停的意思）,还有一个叫running（运动的意思）,通常那肯定是运动的了,所以一般不设置这个,默认就是运动的)

这就是animation属性的一些东西,我们知道animation是一个复合属性,所以它的写法也不需要我们将上面的每一个都写,通常我们写复合属性的写法都是一样的，animation也不例外，即:
animation： 关键帧名称 动画运动时间 linear(匀速的意思) ;
如果还需要别的比如动画延迟时间等,我们往后加就行!

好了,这就是关于css3动画属性的一些小知识,希望对大家会有所帮助,也希望大家学有所成!