CSS3动画常见特效

过渡

transition: all 2s;
/*
设置哪些属性可以有过渡效果
all：所有的属性
*/
/*注意：并不是所有的属性都可以过渡*/
transition-property: left, width;
transition-duration: 5s;
/*
duration   during：在···期间
设置完成过渡所需要的时间
*/
transition-timing-function: ease-in;
transition-delay: 3s;
/*
delay：延迟
设置过渡的延迟时间
*/

 

认识动画

/*声明一个动画*/
@keyframes donghua {
    20% {
        border-radius: 50%;
        background-color: rgba(255,0,255,0.4);
    }
    40% {
        ···
    }
    60% {
        ···
    }
    80% {
        ···
    }
    100% {
        ···
    }
}

0%这个时间点动画还没有开始　等价于from

100%　等价于to

animation-name: ;  /*指定调用动画的名称*/
animation-duration: ;  /*指定动画完成所需要的时间*/
animation-timing-function: ease-in;
animation-delay: ;  /*指定延迟多少秒之后开始执行动画*/
animation-iteration-count: 3;  /*指定动画执行的次数*/
/*infinite：无限循环*/
animation-direction: reverse;
/*
    reverse：反向运行
    alternate：动画先正向执行，再反向执行，并且反向执行也会算一次循环
    alternate-reverse：动画先反向执行再正向执行
*/
animation-play-state: ;  /*设置动画的执行状态*/
/*
    running：运行
    paused：暂停
 */
animation-fill-mode: ;  /*设置动画执行完成之后的状态*/
/*
    forwards：设置对象状态为动画结束时的状态
*/

animation: donghua 5s ease-in 1s 3 reverse forwards running;
/*综合属性    动画名 执行时间 动画效果 延迟时间 播放次数 运行方向 结束状态 执行状态*/

 

Transform转换

2D转换

rotate　旋转

translate　移动

scale　缩放

transform: translate(500px) rotate(720deg);
/* 在移动的过程中进行旋转 */

transform: translate(500px) rotate(720deg);
/* 在移动的过程中进行旋转 */
transform: translate(300px, -500px);
transform: translateX(-200px);
transform: scaleX(0.5) scaleY(0.5); /*缩小*/
transform: scale(0.5);

/* skew：扭曲 */
transform: skew(45deg, 45deg);

3D转换

transform: rotate3d(0, 0, 1, 200deg);
/*
前面三个参数对应x，y，z
第四个参数：旋转的角度
如果对应位置上面的数字是1，那么就会沿着该轴进行旋转
rotate3d(0, 0, 1, 200deg); == rotateZ(200deg);
*/

transform-origin: left;
/* 设置旋转时轴的位置*/

perspective: ;  /*透视 近大远小*/
/* 取值：500~1000较为合适 */

perspective-origin: ;
/*设置透视点（视线源点）的位置*/

transform: translate3d(200px, 100px, 200px);
/* 注意：需要配合perspective属性使用 */

 

缩放

transform: scaleZ(2);
/* 只针对立体图形有效果 */

transform-style: preserve-3d;
/* 指定该元素下的子元素在该元素的3D环境里面 */

backface-visibility: ;
/* 用来设置当元素背对（旋转的角度在90deg-270deg之间）我们的时候，元素的可见性 */