Css3动画

CSS3 转换：
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
您可以使用 2D 或 3D 转换来转换您的元素。

一、transform：
2D 转换方法：子属性：translate()、rotate()、scale()、skew()

transition特性

 二、原点 transform-origin(x,y) x，y可以用百分比来表示 表示原点的横向距离和纵向距离
在没有重置transform-origin改变元素原点位置的情况下，
CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
我们可以通过transform-origin来对元素进行原点位置改变
例： transform-origin: 0 0; 以左上角为原点
50% 0; 以上中为原点
100% 以右中为原点

二、transtion:过渡动画：
transition属性是一个复合属性，主要包括以下几个子属性：

四、animation：
组合写法（简写）：animation: myfirst 5s linear 2s infinite alternate both;

2.动画效果

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），

是否反向播放动画（默认normal），是否暂停动画（默认running）

animation能解决以下问题

1、transition需用事件触发【比如加个hover伪类】，不能在网页加载时自动发生
2、一次性，不能重复发生，除非一再触发
3、只有两个状态：开始和结束状态
4、一条transition规则只能定义一个属性