css动画transform,css transition动画

八.CSS之animation(动画)

1、CSS 的动画属性有很多，其中包括：animation、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count 和 animation-direction。

2、animation 属性是一个简写属性，用于设置动画属性：animation-name：规定 @keyframes 动画的名称。animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。animation-timing-function：规定动画的速度曲线。

3、指代不同 animation ：属性是一个简写属性，用于设置六个动画属性。transition：属性是一个简写属性，用于设置四个过渡属性。

4、【相关视频教程：CSS3教程】css3的动画属性animation-name属性animation-name属性：定义动画名称，用于指定由规则定义的动画的一个或多个名称。

5、animation-direction 规定是否应该轮流反向播放动画。animationname 必需。定义动画的名称。 keyframes-selector 必需。动画时长的百分比。

css3中怎样定义动画的旋转中心点

我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。

首先新建一个html5文档，完成基本代码编写，如下图所示。然后新建一个长100像素，高50像素背景为红色的长方形图层。接着通过输入“border-radius：50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。

使用transform-origin设置css3旋转中心，分别有两个参数，代表x和y轴的位置。旋转参考的零点：元素左上角的位置或者说盒子模型的左上角。

transform-origin：50% 50%； 设置旋转中心为元素中心。transform-origin：0% 0%； 设置旋转中心为元素左上角。transform-origin：100% 100%； 设置旋转中心为元素右下角。

transform-origin： 20% 40%； 设置基准点的位置。

使用CSS3 transform 属性设置元素旋转。定义和用法 transform 属性向元素应用 2D 或 3D 转换。

12.CSS3的Transform详解

1、transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2、D平移 .element { transform： translate3d（100px， 50px， 0）；} 上述示例将.element选择器的元素在X轴上向右平移100像素，Y轴上向下平移50像素，Z轴上不发生变化。

3、下面要用到旋转，rotate，不懂的话，请点击→ css3系列之transform 详解rotate 首先Z 轴是朝向我们的，所以 看不出效果，但是，我们把它转个身，让Z轴 面对 右边，就可以了。

4、rotate：旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。（没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center）加上 transform-origin 设置旋转点。

标签：动画transitioncsstransform