css3动画与css3过渡的区别(css3动画教程)

点击右上方红色按钮，关注“网络秀”，让你真正露脸。
引言说到CSS3动画，就要说说变换、平移、转场、动画这四个属性。transform主要定义元素的动作，如旋转、倾斜、位移等。平移是变换中的一个属性，用于2D/3D置换。后两者主要描述动作，如动画时间、速度曲线、次数等。
如何快速入门基本的CSS3动画
下面是一些简单的例子，让你快速上手：
快速启动第一个动画。
如何快速入门基本的CSS3动画
这里，在悬停事件期间，改变宽度和背景颜色，并且通过过渡来描述动画。由于我们只描述宽度，鼠标指向上方，背景颜色会立即变化，不会有渐变。
为什么这里用转场而不用动画？这就是他们的直接区别。
转场需要触发一个事件，动画可以在不触发任何事件的情况下，随时间显式改变css的属性值，从而达到一个动画效果。过渡属性是一个简单的动画属性，非常简单易用。可以说是动画的简化版，用于普通简单的网页效果。
现在你看，因为我们使用悬停事件，我们必须使用转换。
看下面的第二个例子。
快速启动第二个动画。
如何快速入门基本的CSS3动画
这里动画是从加载开始的，所以用了动画，改变宽度和背景色，取1s，无限循环执行。@关键帧规则是创建动画。-WebKit-(Chrome/Safari)、-MS-(IE)或-moz-(firefox)用于兼容不同的浏览器。
快速启动第三个动画。
如何快速入门基本的CSS3动画
变换：旋转使其P元素2D旋转20。当然可以设置transform:rotateY，Y轴的3D旋转。
如何快速入门基本的CSS3动画
还可以设置transform:平移2D和3D位移；
如何快速入门基本的CSS3动画
Transform:缩放和3D缩放；
如何快速入门基本的CSS3动画
变压器：歪斜，2D倾斜等等。
如何快速入门基本的CSS3动画
总结一个好的动画效果，第一要素是：好的创意、创意、好的成品；第二个要素是：有很好的解决问题的思路。有了设计，制作就需要想办法达到效果，剥茧取丝，循序渐进；第三要素：无所畏惧，勇敢尝试，多练，多做。灵感往往来源于和你一起写作的过程。
有了上面的小例子，相信朋友们也可以自己编写简单的CSS3动画了。如果有疑问，可以评论留言，我们可以一起学习讨论。