CSS3动画

 

开发工具与关键技术：DW   css3

作者：卢佳琪

撰写时间：撰写时间：2019年1月18日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

下图是用css3做的一些简单的动画效果，也都有一点迷惑性，感觉挺神奇的，这是我自己学习对css3的练习，从而这样可以对代码的熟悉和巩固，从学习的乐趣中得到更多的想法，从而这样做出一些可以吸引人的创新作品。第一实现的效果是缩放，第二个是扭曲，第三个和第四个是颜色和位移的变化，第五个是旋转，刚开始做的时候信心满满，觉得肯定会做的很完美，会做出一个很好的效果，于是对着电脑键盘噼里啪啦地敲了起来，很快基本的布局和样式都做了出来，接下来就剩下动画效果了。@keyframes这个是制作动漫效果的神器，可神奇了，通过@keyframes再给名称然后设置几个百分比，设置百分让它有一个过度这样就能实现有动漫效果了。愿望是美好的，现实是残酷的，困难出现了，我把所有实现效果的代码都敲完了到网页上一刷新，结果没效果

如下图所示，第一时间就想到是不是代码打错了或打漏了，就对代码检查了一遍又一遍，代码是正确的又没什么问题可是效果就是没有，这时候开始就感到苦恼了，就请教了同学，他帮我检查了几遍尝试几次还不行，这个时候再次增加苦恼了。静静地坐了一会，回忆了一下老师上课所说过的内容，突然想到了js里面老师说的函数调用，函数调用，就想到了我是不是还没用调用名称，打开代码一看果然如此是名称还没调用，把名称调用后到网页上一刷新效果就实现，问题就这样解决了。同理js里面的封装好的函数如果没调用同样是没效果。你可否遇到过这样的情况呢。

上图的效果是简单说就是围着一个正方形移动，从左上角开始按顺时针方向运动，然后回到原点时改变方向按逆时针运动又回到原点，接着重复上一个步骤，设置它为无限次这样就行形成一个循环了达到自己动了起来的效果，到达每一个角的时候就会发生颜色改变，颜色不断改变有一种闪烁的效果了.一个简单的动漫就这样做好了

还有就是代码量的问题，很多时候可以减少代码量，这就可以少打那些不必要的代码了，在时间也减少了很多，节省时间有利于快速开发。讲解一下里面的属性

animation-name: @keyframes 动画的名称

animation-duration: 动画完成一个周期的时间

animation-timing-function: 动画的速度曲线

animation-timing-function: 动画的速度曲线

animation-delay: 动画何时开始

animation-iteration-count: 动画被播放的次数

animation-direction: 动画是否在下一周期逆向地播放

下图这一个代码完全等价于上图那个代码