CSS3动画

                                                CSS3动画

开发工具与关键技术：ASP.NET MVC/CSS

作者：郑石秀

撰写时间:3019/3/28

想要创建一个CSS3动画，首先创建出动画HTML的样式，然后通过CSS设计自己想要的一些样式，再通过CSS3的动画属性就可以设计出一个CSS3动画效果。CSS3动画属性中animation-name是指定动画的名称，可以给这个动画自定义一个命名。nimation-duration是指定动画在运行过程中的总时间，这个可以根据自己的需求设计一个时间，时间过短则这个动画运行的过程就会非常的快，时间设计过长则效果相反动画的运行速度就会非常的慢。animation-timing-function是指动画在运动过程中的速度变化，我这里设计的是默认值ease动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。

animation-iteration-count是设计动画循环次数的属性，自己需要这个动画运行几次就设计几次，我这里设计的是infinite，这个属性表示的意思是循环无数次。animation-delay是指动画延迟多长时间才开始执行，就好比设计一个点击事件，点击这个属性多久后才执行代码。

animation-direction这个属性代表的是动画运行的方向，我这里设计的是alternate，它作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放，还有一种属性normal是默认值，如果设置为normal时，动画的每次循环都是向前播放。

在这里插入图片描述

上面设计的都是一些动画属性，接下来才是动画运动的核心部分，首先通过@keyframes它旁边的一个命名是之前就通过animation-name指定动画的名称，它们的命名要一致动画才能实现，不然就调用不了，把之前命名的直接复制过来，这样就会避免敲错代码。
创建动画命名后0%是开始，100%是结束，然后在百分百的括号中设计一些样式，可以设计不同的百分比，根据自己需要的设计就好了。我这里设置了元素的位移，动画到达某个百分比的时候通过位移改变运行的方向，从而达到需求的效果，translate(x,y)这个元素的属性代表水平方向和垂直方向的位移，translateX(x)这个属性只是代水平方向的位移，可以通过百分比设置，也可以通过像素设置。我这里设置用的是像素，这个动画在到达25%的时候它就会向水平方向移动360px。translateY(y)这个属性是垂直方向的属性，只在垂直方向位移，用法和之前的一样，设置之后就会在垂直方向进行位移。

总结一下，在ASP.NET MVC中@keyframes在使用的时候要在@keyframes的前面加一个@符号，才能使用不然直接使用@keyframes就会调用不了，如果在DW中直接使用@keyframes就能调用了。这是@keyframes在这两个开发软件中的区别。