css动画属性怎么用

这篇文章给大家分享的是有关css动画属性怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联的客户来自各行各业,为了共同目标,我们在工作上密切配合,从创业型小企业到企事业单位,感谢他们对我们的要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括网站设计、做网站、电商网站开发、微信营销、系统平台开发。

1 transition(过渡)

使用语法:

transition: property duration timing-function delay;

参数:

(1) property(设置过渡效果的css属性名称):none | all | property。none表示没有属性获得过渡效果;all表示所有属性都将获得过渡效果;property表示css属性列表,多个属性用逗号( , )隔开。

(2) duration(设置完成过渡效果的时间):秒或毫秒(s/ms)。

(3) timing-function(设置效果速度的速度曲线):linear,规定以相同速度开始到结束,等价于cubic-bezier(0,0,1,1);ease,慢速开始,然后慢速结束,等价于cubic-bezier(0.25,0.1,0.25,1);ease-in,以慢速开始,等价于cubic-bezier(0.42,0,1,1);ease-out,以慢速结束,等价于cubic-bezier(0,0,0.58,1);ease-in-out,以慢速开始和结束,等价于cubic-bezier(0.42,0,0.58,1);cubic-bezier(n,n,n,n),在该函数定义自己的值,数值为0-1之间。

(4) delay(过渡效果何时开始):值多少秒后执行过渡效果,如 2s ,表示2s后执行。

2 transform

transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作。

使用语法:

transform: none|transform-functions;

参数:

(1) none:定义不进行任何转换,一般用于注册掉该转换。

(2) transform-functions:定义要进行转换的类型函数。主要有:

旋转(rotate):主要分为2D旋转和3D旋转。rotate(angle),2D 旋转,参数为角度,如45deg;rotate(x,y,z,angle),3D旋转,围绕原地到(x,y,z)的直线进行3D旋转;rotateX(angle),沿着X轴进行3D旋转;rotateY(angle);rotateZ(angle);

缩放(scale):一般用于元素的大小收缩设定。主要类型同上,有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z),其中x、y、z为收缩比例。

倾斜(skew):主要用于对元素的样式倾斜。skew(x-angle, y-angle),沿着x和y轴的2D倾斜转换;skewX(angle),沿着x轴的2D倾斜转换;skew(angle),沿着y轴的2D倾斜转换。

移动(translate):主要用于将元素移动。translate(x, y),定义向x和y轴移动的像素点;translate(x, y, z),定义像x、y、z轴移动的像素点;translateX(x);translateY(y);translateZ(z)。

3 animation

该属性主要用于设置动画属性。

使用语法:

animation: name duration timing-function delay iteration-count direction;

参数:

(1) name:需要绑定到选择器的keyframe名称。

(2) duration:完成该动画需要花费的时间,秒或毫秒。

(3) timing-function:动画的运动速度曲线。linear,规定以相同速度开始到结束,等价于cubic-bezier(0,0,1,1);ease,慢速开始,然后慢速结束,等价于cubic-bezier(0.25,0.1,0.25,1);ease-in,以慢速开始,等价于cubic-bezier(0.42,0,1,1);ease-out,以慢速结束,等价于cubic-bezier(0,0,0.58,1);ease-in-out,以慢速开始和结束,等价于cubic-bezier(0.42,0,0.58,1);cubic-bezier(n,n,n,n),在该函数定义自己的值,数值为0-1之间。

(4) delay:设置动画在开始之前的延迟。

(5) iteration-count:设置动画执行的次数。

(6) direction:是否轮询反向播放动画。normal,默认值,动画应该正常播放;alternate,动画应该轮流反向播放。

下面展示了这些元素的测试代码:




    transition/transform


    #div1 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: red;
    }
    #div2 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: green;
    }
    #div3 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: blue;
    }
    #div4 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #234F21;
    }
    #div5 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #af123c;
    }
    #div6 {
        float: left;
        height: 100px;
        width: 100px;
        background-color: #affa3c;
    }
    /* transition 实现多个属性 */
    #div1:active {
        width:200px;
        height: 200px;
        transition: width 2s ease,height 2s ease;
        -moz-transition: width 2s ease,height 2s ease; /* Firefox 4 */
        -webkit-transition: width 2s ease,height 2s ease; /* Safari 和 Chrome */
        -o-transition: width 2s ease,height 2s ease; /* Opera */
    }
    /* transform 旋转 rotate */
    #div2:hover {
        transform:rotate(35deg);
        -ms-transform:rotate(35deg);     /* IE 9 */
        -moz-transform:rotate(35deg);     /* Firefox */
        -webkit-transform:rotate(35deg); /* Safari 和 Chrome */
        -o-transform:rotate(35deg);     /* Opera */
    }
    /* transform 缩放 scale */
    #div3:hover {
        transform:scale(0.8, 1.5);
        -ms-transform:scale(0.8, 1.5);     /* IE 9 */
        -moz-transform:scale(0.8, 1.5);     /* Firefox */
        -webkit-transform:scale(0.8, 1.5); /* Safari 和 Chrome */
        -o-transform:scale(0.8, 1.5);     /* Opera */
    }
    /* transform 倾斜 skew */
    #div4:hover {
        transform:skew(35deg);
        -ms-transform:skew(35deg);     /* IE 9 */
        -moz-transform:skew(35deg);     /* Firefox */
        -webkit-transform:skew(35deg); /* Safari 和 Chrome */
        -o-transform:skew(35deg);     /* Opera */
    }
    /* transform 移动 translate */
    #div5:hover {
        transform:translate(45px, 45px);
        -ms-transform:translate(45px, 45px);     /* IE 9 */
        -moz-transform:translate(45px, 45px);     /* Firefox */
        -webkit-transform:translate(45px, 45px); /* Safari 和 Chrome */
        -o-transform:translate(45px, 45px);     /* Opera */
    }
    /* transform 多个效果 */
    #div6:hover {
        transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);
        -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);     /* IE 9 */
        -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px)translate(45px, 45px); /* Safari 和 Chrome */
        -o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);     /* Opera */
    }


    transition
    transform rotate
    transform scale
    transform skew
    transform translate     transform     transition/transform     /* animation */     .div7 {         width:100px;         height:100px;         background:red;         position:relative;         animation:myfirst 5s infinite;         animation-direction:alternate;         /* Safari and Chrome */         -webkit-animation:myfirst 5s infinite;         -webkit-animation-direction:alternate;     }     @keyframes myfirst{         0%   {background:red; left:0px; top:0px;}         25%  {background:yellow; left:200px; top:0px;}         50%  {background:blue; left:200px; top:200px;}         75%  {background:green; left:0px; top:200px;}         100% {background:red; left:0px; top:0px;}     }     @-webkit-keyframes myfirst {/* Safari and Chrome */         0%   {background:red; left:0px; top:0px;}         25%  {background:yellow; left:200px; top:0px;}         50%  {background:blue; left:200px; top:200px;}         75%  {background:green; left:0px; top:200px;}         100% {background:red; left:0px; top:0px;}     }   @-moz-keyframes myfirst {/* Firefox */      0%   {background:red; left:0px; top:0px;}         25%  {background:yellow; left:200px; top:0px;}         50%  {background:blue; left:200px; top:200px;}         75%  {background:green; left:0px; top:200px;}         100% {background:red; left:0px; top:0px;}   }   @-o-keyframes myfirst {/* Opera */      0%   {background:red; left:0px; top:0px;}         25%  {background:yellow; left:200px; top:0px;}         50%  {background:blue; left:200px; top:200px;}         75%  {background:green; left:0px; top:200px;}         100% {background:red; left:0px; top:0px;}   }   animation  

感谢各位的阅读!关于“css动画属性怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前文章:css动画属性怎么用
网站链接:http://pwwzsj.com/article/pjodjg.html