css动画、变形、过渡

1.animation动画

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name 规定需要绑定到选择器的 keyframe 名称
• animation-duration 规定完成动画所花费的时间，以秒或毫秒计
• animation-timing-function 规定动画的速度曲线
• animation-delay 规定在动画开始之前的延迟
• animation-iteration-count 规定动画应该播放的次数
• animation-direction 规定是否应该轮流反向播放动画。

例子

注释：Internet Explorer 9 以及更早的版本不支持 animation-direction 属性。

链接：http://www.w3school.com.cn/cssref/pr_animation.asp

2.Transform：变形

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

定义和用法

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

值	描述	测试
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

Hello World

http://www.w3school.com.cn/cssref/pr_transform.asp

http://www.w3school.com.cn/css3/css3_3dtransform.asp

3.Transition：过渡

过渡属性

下面的表格列出了所有的转换属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。

注释：本例在 Internet Explorer 中无效。

注释：这个过渡效果会在开始之前等待两秒。

http://www.w3school.com.cn/css3/css3_transition.asp

总结：变形控制样式，过渡控制时间；动画，对以上两者的补充

ps:今天系统把css动画相关的看了遍，感觉也不是很难嘛。但是要写出好看的效果还是要动手多加练习。本博客也基本这都是摘录，没有自己的产出。仅仅是对自己学习的一份记录与总结，希望自己加油，有空就多学点。不管是原创还是摘录都能进行下记录。厚积薄发，希望能在github能有点更实际的代码来进行分享。题外话：不管是代码，还是兴趣爱好（英语，手工，画画，打球）尽量坚持，其实这也是一种劳逸结合。

 

参考：https://www.cnblogs.com/Chen-XiaoJun/p/6193079.html