css动画效果

１: transition

div {
width: 200px;
height: 100px;
background-color: pink;
　　/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
　　/* transition: width 0.6s ease 0s, height 0.3s ease-in 1s; */
　　/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
　　/*transition: all 0.6s; 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
　　/*默认的是ease 先快在慢*/
　　transition: width 1s,height 2s;


}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */

　　width: 600px;
　　height: 600px;
}

２：transform：translate()

div {
　　width: 100px;
　　height: 100px;
　　background-color: pink;
　　/*transform: translateX(x, y)*/
　　/*变形： 移动*/
　　transition: all 0.5s;

}
div:hover {
　　transform: translateX(100px);
　　/*a:active 鼠标没点击没有松开鼠标的时候触发的状态 相当于点击*/
　　/*transform: translate(50px, 50px); 当我们点击之后再移动位置*/
　　/*transform: translate(50px); 当我们点击之后再移动位置 x轴*/
　　/*transform: translate(0, 50px); 当我们点击之后再移动位置 y轴*/
　　/*只跟一个参数就是 X*/
　　/*transform: translateY(100px); 只跟一个参数就是 Y*/
}

例子：让盒子居中

　　position: absolute;
　　left: 50%;
　　top: 50%;
　　transform: translate(-50%, -50%);

3: transform: scale(ｎ)；

div img {
　　transition: all 0.2s; 　因为图片缩放了， /*实际图片做动画 所以过渡要给img 做动画 谁做动画，谁加过渡*/
}
div:hover img{
　　transform: scale(1.2);　 /*鼠标经过盒子的时候 里面的img做 缩放*/
}

4: transform: rotate(360deg);　transform-origin: transform-origin: top right;   /2D旋转/

img {
　　margin: 200px;
　　transition: all 0.6s;
　　transform-origin: top right;/*旋转的中心点，默认是中心位置，设置之后可以改变旋转的中心点*/
}
img:hover {

　　transform: rotate(360deg); /* deg 度数*/
}

透视效果:perspective: 10000px

body {
　　perspective: 10000px; 视距 距离 眼睛到屏幕的距离 视距越大效果越不明显 视距越小，透视效果越明显
}
img {
　　display: block;
　　margin: 100px auto;
　　transition: all .2s;
}
img:hover {
　　transform: rotateX(360deg);
}

5: transform: skew(-30deg, 30deg); /倾斜/

６：动画：

div {
　　width: 100px;
　　height: 100px;
　　background-color: pink;
　　animation: go 2s ease 0s infinite alternate; /*引用动画*/
　　/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
　　/*动画名称是自己定义的 go google*/
　　/*infinite 无限循环*/
　　/*一般情况下，我们就用前2个 animation: go 2s*/
}
/*@keyframes go {} 定义动画*/
@keyframes go {
　　from {
　　transform: translateX(0)
　　}
　　to {
　　transform: translateX(600px)

　　}
}

或者：

div {
　　width: 100px;
　　height: 100px;
　　background-color: pink;
　　/*animation: go 2s ease 0s infinite alternate; 引用动画*/
　　animation: go 2s infinite; /*引用动画*/
　　/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
　　/*动画名称是自己定义的 go google*/
　　/*infinite 无限循环*/
　　/*一般情况下，我们就用前2个 animation: go 2s*/
}
　　/*@keyframes go {} 定义动画*/
@keyframes go {
　　0% { /*起始位置，等价于 form*/
　　　　transform: translate3d(0, 0, 0) ;
　　}
　　50% {
　　　　transform: translate3d(800px, 400px, 0);

　　}
　　51% {
　　　　transform: translate3d(0, 400px, 0);

　　　　transform: rotateY(180deg);

　　}
　　99% {
　　　　transform: translate3d(0, 0, 0); /*100% 相当于结束位置 to*/

　　　　transform: rotateY(180deg);

　　}
}/* 动画结束之后会返回原来的位置！！！*/

 

animation-play-state:paused;  /*鼠标经过暂停动画*/