css3动画属性

css3动画属性

1.变形的基点，在使用transform方法进行文字或图像变形的时候，默认是以元素的中心点为基准点进行变形的，使用transform-origin属性，可以改变变形的基准点，语法：transform-origin：left,center；
2.移动动画，方法语法： transform：translate(水平方向的移动距离); 或者 transform：translate(水平方向的移动距离，垂直方向的移动距离);也可以单独垂直移动，语法：transform: translateY(移动的距离)
3.倾斜动画，语法： transform：skew(水平方向的倾斜角度); 或者 transform：skew(水平方向的倾斜角度，垂直方向的倾斜角度);
4.缩放动画，语法： transform：scale(缩放倍率); 或者 transform：scale(水平缩放倍率， 垂直缩放倍率);
5.旋转动画，语法：rotate(角度度数)能够旋转指定的元素对象，语法：transform:rotate(45deg)；也可以在Y轴上旋转，语法：transform:rotateY(45deg)；

3d属性

1.要实现3d效果，首先需要给父元素形成3d空间，给父元素添加transform-style:preserve-3d；形成3d空间
2.给父元素添加景深，使效果更明显易见，语法：perspective:500px；
3.平移属性与2d相同，增加了z轴的平移，语法transform:tranlateZ(平移距离)
4.旋转属性与2d相同，增加了z轴旋转
5.缩放属性与2d相同，增加z轴缩放

过渡属性

transform变化添加transition属性，可以给变形移动添加过渡动画，使变化看起来不生硬。
transition-duration 这个是过度的持续时间，单位可以是s或者ms 例如2s .5s(省略小数点前面0)
transition-delay 这个是开始过渡的延迟时间 , 在缩写中，是第二个时间，例如transition: margin-left 4s 1s; 过渡4s 延迟1s执行;
transition-timing-function 这个是过渡快慢变化， 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
平常使用，可以使用简写transition:完成过渡的时间，过渡的延迟时间，过渡的变化曲线；

animation动画帧

1.首先制订关键帧，语法为：
@keyframes 关键帧的名称{
from{}
to{}
0%{
//开始状态
}
25%{

        }
        50%{

        }
        ......
        100%{
            //结束状态
        }
    }

2.在需要播放的动画父元素中添加animation属性，animation有以下几个复合属性
animation-name 关键帧的名称
animation-duration 动画的持续的时间 animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线） animation-delay 动画的延迟
animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环)
animation-direction 运动的方向
属性值：
- reverse：反方向运行 （ 让关键帧从后往前执行 ）
- alternate：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state
属性值：
paused暂停 running运动
一般使用简写，语法为：animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间