1、位移：transform：translateX x轴位移
transform：translateY y轴位移
同时写会被覆盖，所以用复合属性写
复合属性：transform：translate（100px，100px）第一个是x轴参数 第二个是y轴参数
起始点：00点，边框的左上角的顶点
transform：translate（100px 0，） x轴距离左边100px
transform：translate（ 0，100px） y轴距离左边100px
2、缩放：transform：scale（2）里面的数字表示倍的意思
transform：scale（1）表示本身，不变
transform：scale（0.5）小于1表示缩小
transform：scale（0）表示缩小到消失
3、倾斜：transform：skew（ax，ay）表示x轴倾斜角度，y轴倾斜角度 单位是度数值deg
transform：skew（60deg，20deg）
x轴会改变宽度，y轴会改变高度
第一个表示x轴，按照逆时针方向进行旋转，宽度变化，高度不变
第二个表示y轴，按照顺时针方向进行旋转，高度变化，宽度不变
4、旋转：rotate（）单位也是deg
只设置一个值表示沿中心点旋转
rotatex 沿x轴转
rotatey沿y轴转
transition: all 2s linear .5s/加在div上
过渡属性
过渡动画函数（( transition-timing-function )
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
linear
规定以相同速度开始至结束的过渡效果
ease
规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值)
ease-in
规定以慢速开始的过渡效果
ease-out
规定以慢速结束的过渡效果
ease-in-out
规定以慢速开始和结束的过渡效果
一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
