❤ CSS动画库

❤

translate、transform、transition和animation

translate:移动，css 中 transform的一个方法

正常写法是：

translate() ，元素从其当前位置移动，根据给定的 距离左侧（x 坐标） 和 距离上面（y 坐标） 位置参数进行移动

基本用法

 transform: translate(50px, 100px);

一些兼容写法

transform:translate(50px,100px) // W3c标准
-webkit-transform:translate(10,10) // Safari Chrome
-moz-transform:translate(10,10) // firefox
-ms-transform:translate(10,10) // IE9
-o-transform:translate(10,10) // opera
————————————————

transform

1、介绍

transform是CSS3中具有颠覆性的特征之一，应用于元素的2D或3D转换，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果

3D变形
2d x y

3d x y z

左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度

x左负
y 上负
z 里负

2、使用

（1）移动 translate(x, y) --参照上文 （位移）

（2）CSS Transform scale 属性

（3）缩放 scale(x, y)
用来改变元素的显示比例

（4）旋转 rotate(deg)
Transform：rotateX/rotateY/rotateZ；/rotate（旋转）/

rotateX（30deg）表示元素沿着x轴做旋转，30deg表示要沿着x轴方向的 顺时针旋转30度，将值设为负数则是逆时针旋转30度。

单位是 deg 度数

rotateX()
就是沿着 x 立体旋转.

transform:rotateX(180deg);

rotateY()
沿着y轴进行旋转

transform:rotateY(180deg);

rotateZ()
沿着z轴进行旋转

transform:rotateZ(180deg);

（5）skew 属性 (倾斜)

skewX 属性

transform: skewX(-32deg);

元素沿着 X 轴翻转段落元素 -32 度

skewY属性
skewY属性使指定元素沿 Y 轴（垂直方向）翻转指定角度

transform:skewY(-10deg);

（6） transform-origin可以调整元素转换变形的原点

transform-origin: left top;transform: rotate(45deg);

改变元素原点到左上角，然后进行顺时旋转45度

（7）perspective（透视） 属性

图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的

透视可以将一个2D平面，在转换的过程当中，呈现3D效果
透视原理： 近大远小 。

浏览器透视：把近大远小的所有图像，透视在屏幕上。

perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

理解透视距离原理：

属性 ： backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
开门案例
翻转盒子案例

CSS动画库

Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）,不需要了解任何Js技术即可完成动画的制作

详细可看关于我的另一篇 animation 文章

常见的一些CSS3 动画库（让网页不再单调）

Animate.css

Animate.css 是一个轻量级的开源 CSS 动画库，提供了近 80 种常用的动画效果，涵盖了淡入淡出、翻转、缩放、旋转等多种类型。它易于使用，只需在 HTML 元素中添加类名即可实现动画效果。Animate.css 还支持自定义动画效果，具有很强的灵活性。

以下是其中一些常用的动画特效：

Bounce：元素在运动过程中有弹性的跳跃效果。
FadeIn：元素由透明到不透明，实现淡入效果。
FlipInX：元素从 X 轴翻转进入。
Pulse：元素呼吸般的闪烁效果。
RotateIn：元素以一定的时间内旋转一周进入。
SlideInLeft：元素从左侧滑入。
Swing：元素像摆钟一样左右晃动。
ZoomIn：元素从小到大缩放或者从远到近变大。
RollIn：元素从外面卷入。
以上仅是 Animate.css 中的几个动画特效示例，Animate.css 提供的动画特效非常丰富，可以满足不同场景下的需求。Animate.css 的使用也非常简单，只需将其导入到页面中，然后在 HTML 元素中添加相应的类名即可实现对应的动画效果，使网页看起来更加生动、有趣和令人印象深刻。

代码地址:https://github.com/animate-css/animate.css.git

Hover.css

Hover.css 是一个基于 CSS3 的动画库，专门用于创建图像悬停效果。它提供了多种简单易用的特效，例如左右翻转、上下翻转、放大缩小、渐变缩放等。Hover.css 可以为网站的图片增加生动有趣的效果，吸引用户的注意力。
Hover.css 提供了多种动画效果，例如：

hvr-bounce-in：元素在进入时具有弹性效果；
hvr-pulse-grow：元素像心脏一样跳动；
hvr-shrink：元素从大到小收缩；
hvr-bob：元素上下晃动；
除了上面的示例之外，还可以通过修改 Hover.css 代码来自定义颜色、尺寸和透明度等属性，以满足不同的设计需求

代码地址:https://github.com/IanLunn/Hover.git

Magic.css

Magic.css 是一个非常实用的 CSS3 动画库，提供了多种简单易用的 CSS3 动画效果，例如抖动、闪烁、旋转等。它易于使用，只需在 HTML 元素中添加类名即可实现动画效果。Magic.css 还支持自定义动画效果，可以帮助用户快速实现酷炫的动画效果。适用于多种场景:

网站首页和 Banner：通过 Magic.css 提供的动画特效，可以为网站的首页和 Banner 增添生动和有趣的元素，吸引用户的注意力，增加用户停留时间。
动态图标和按钮：Magic.css 可以实现很多具有交互性的动态图标和按钮，例如交换位置、旋转、弹跳、闪烁等效果，可以提升用户体验和页面互动性。
表单验证和反馈：Magic.css 中提供了一些表单验证和反馈的动态效果，例如闪烁、震动、颜色变化等，可以帮助用户快速识别表单的状态和错误信息。
图片和文字特效：通过 Magic.css 提供的图片和文字特效，可以为网页添加更多的视觉效果，例如立体效果、浮动、旋转、缩放等，可以使页面更加丰富和生动。
代码地址:https://github.com/miniMAC/magic.git

Loaders.css

Loaders.css 是一个轻量级的 CSS3 动画库，专门用于创建加载动画和进度条效果，提供了多种简单易用的设计。使用 Loaders.css 可以为页面的加载过程增加一些生动有趣的元素，降低用户等待时的焦虑感。

代码地址:https://github.com/ConnorAtherton/loaders.css.git

Imagehover.css

Imagehover.css 是一个基于 CSS3 的动画库，专门用于创建图像悬停效果。使用 Imagehover.css 可以为网站的图片增加生动有趣的效果，吸引用户的注意力,提升用户体验和页面互动性。
Imagehover.css 适用于多种场景，包括但不限于：

图片悬停特效：Imagehover.css 提供了多种精美的图片悬停特效，可以为网站的图片增加生动有趣的效果，吸引用户的注意力。
产品展示：Imagehover.css 可以用于展示产品的图片，通过特效的触发方式，提高用户对产品的关注度和购买欲望。
图片墙：Imagehover.css 可以用于实现图片墙，通过特效的布局和设计，让页面更加生动和有趣。

代码地址:https://github.com/ciar4n/imagehover.css.git

持续更新中…