css3动画属性有哪些

本篇内容主要讲解"css3动画属性有哪些"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"css3动画属性有哪些"吧!

css3三大动画属性是：1、transition属性，用于设置元素的过渡效果；2、transform属性，用于向元素应用2D或3D转换（旋转、缩放、移动或倾斜）；3、animation属性，需要和"@keyframes"一起使用来创建动画。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3动画属性分为：transform、transition、animation

1.transition(过渡)

a:transition-property：检索或设置对象中的参与过渡的属性b.transition-duration：检索或设置对象过渡的持续时间c.transition-delay：检索或设置对象延迟过渡的时间d.transition-timing-function：检索或设置对象中过渡的动画类型简写：                transition: 属性值1  属性值2  属性值3  属性值4属性值1： 需要参与过渡属性   all  ( 能支持过渡属性的都会过渡变换  默认值)属性值2： 过渡的时间   s秒   ms  毫秒属性值3： 延迟的时间   s秒   ms  毫秒属性值4： 动画的类型（匀速、匀加速、匀减速........）

例如：transition:3s 2s linear;

2.transform

2D

a.位移：transform:translate(参数1，参数2)                        参数1：在X轴移动的距离            参数2：在Y轴移动的距离            ps:参数如果是正值的情况下：往右往下   负值：往左往上                单独设置X/Y的位移：                        transform:translateX(参数);            transform:translateY(参数);b.缩放：transform:scale(参数1，参数2);                        参数1：X轴缩放的比例             参数2：Y轴缩放的比例            ps:参数小于1,缩小；参数大于1，放大。如果两参数相同，写一个就行        单独设置X  Y                        transform:scaleX();                        transform:scaleY();c.旋转：transform:rotate();                        默认情况下围绕中心点转动，转动的是度数，deg!                单独设置围绕某个轴（X  Y）                        transform:rotateX()                        transform:rotateY()d.倾斜：transform:skew();                单独设置围绕某个轴（X  Y）                        transform:skewX()                        transform:skewY()补充：如果有两个功能函数：先写位移 再写旋转。

单独举例旋转：

当围绕中心点时：

span{            display: block;            width: 300px;            height: 150px;            background: purple;            transform: rotate(30deg);        }

当围绕X轴时：

span{            display: block;            width: 300px;            height: 150px;            background: purple;            transform: rotateX(30deg);        }

可以看到，当围绕X轴旋转时，盒子的上面往里，下面往外。

当围绕Y轴时：

 span{            display: block;            width: 300px;            height: 150px;            background: purple;            transform: rotateY(30deg);        }

可以看到，图片的左侧往外，右侧往里。

3D

形成3D空间：transform-style:preserve-3d

a.位移：        transform:translate(x,y,z);            translateX()            translateY()            translateZ(不能是百分比)  b.旋转：        transform:rotate();            rotateX()            rotateY()            rotateZ()  //默认情况效果类似            rotate3D(x,y,z,a)   [ 0不旋转。1旋转 ]                - x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；                - y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；                - z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；                - a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3.animation

制定关键帧：        @keyframes 关键帧的名称{        from{}        to{}     或者        0%{        }        50%{        }        100%{        }    }调用关键帧    animation:  复合属性                animation-name   关键帧的名称        animation-duration   动画的持续的时间        animation-timing-function   动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线 step-start  //没有动画中间的过渡效果。每次直接跳到下一帧开始的地方）        animation-delay  动画的延迟        animation-iteration-count   动画运动的次数（默认情况下运动1次） infinite(无限循环)        animation-direction  运动的方向                属性值：                    - reverse：反方向运行 （ 让关键帧从后往前执行 ）                    - alternate：动画先正常运行再反方向运行，并持续交替运行                    - alternate-reverse：动画先反运行再正方向运行，并持续交替运行        animation-play-state                 属性值：                    paused暂停                    running运动        常用的写法：                    animation:关键帧的名称  动画运动的时间  linear(匀速)  动画延迟的时间

例：

                    
        
1
        
2
        
3
        
4
        
5
        
6
    

到此，相信大家对"css3动画属性有哪些"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！