CSS3的2D动画属性(2)，京东最爱考的前端面试题

2、重点：

定义2D转换中的移动，沿着X和Y轴移动元素；

translate最大的优点：不会影响其他元素的位置；

translate中的百分比单位是相对于自身元素的translate：（50%，50%）；

对行内标签没有效果；

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。

1、语法：

transform：rotate（度数）

2、重点：

rotate里面跟度数，单位是deg比如rotate（45deg）;

角度为正时，顺时针，负时，为逆时针；

默认旋转的中心点是元素的中心点；

2D转换中心点transfo-origin

1、语法：

transform-origin：x y;

2、重点：

注意后面的参数x和y用空格隔开；

xy默认转换的中心点是元素的中心点（50% 50%）;

还可以给x y设置像素或者方位名词（top bottom left right center）;

2D转换之缩放scale：缩放，顾名思义，可以放大和缩小。只要给元素添加上这个属性就能控制它放大还是缩小。

1、语法：

transform：scale（x,y）;

2、重点：

注意其中的x和y用逗号分隔；

transform：scale（1，1）：宽和高都放大一倍，相对于没有放大；

transform：scale（2，2）：宽和高都放大了2倍；

transform：scale（2）：只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）；

transform：scale（0.5，0.5）：缩小；

scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子；

二、2D动画的基本使用方法

============================================================================

分为两步：

1. 先定义动画，

2. 再使用（调用动画）

语法：

1、用keyframes定义动画

（类似定义类选择器）：

@keyframes 动画名称{

0%{

width：100px；

}

100%{

width：200px;

}

2、元素使用动画：

div{

width:200px;

height:200px;

background-color:aqua;

margin:100px auto;

//调用动画

animation-name:动画名称；

//持续时间

animation-duration:持续时间；

}

三、2D动画属性

=======================================================================

1.常见属性

---

2.速度曲线属性

---

3.动画简写属性

---

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；

语法：

animation：myfirst 5s linear 2s infinite alternate;

注意：

• 简写属性里面不包含animation-play-state；

• 暂停动画：animation-play-state:puased;经常和鼠标经过等其他配合使用；

• 想要动画走回来，而不是直接跳回来：animation-direction:alternate;

• 盒子动画结束后，停在结束位置：animation-fill-mode:forwards;

四、2D动画的具体实现

==========================================================================

1.奔跑熊

---

代码如下（示例）：

效果如下（示例）：

2.盒子进圈

---

代码如下（示例）：