杰晶网络

css动画属性使用及实例代码(transition/transform/animation)
网页制作 2024/11/24 佚名
3 2

在开发中，一个好的用户操作界面，总会夹杂着一些动画。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，动画应该轮流反向播放。

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

<!DOCTYPE html>
<html>
<head>
    <title>transition/transform</title>
</head>
<style type="text/css">
    #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 */
    }
</style>
<body>
    <div id="div1">transition</div>
    <div id="div2">transform rotate</div>
    <div id="div3">transform scale</div>
    <div id="div4">transform skew</div>
    <div id="div5">transform translate</div>
    <div id="div6">transform</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>transition/transform</title>
</head>
<style type="text/css">
    /* 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;}
　　}
</style> <body> <div class="div7">animation</div> </body> </html>

总结

以上所述是小编给大家介绍的css动画属性使用及实例代码(transition/transform/animation) ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

标签：
css,属性,css动画属性,css,transition,transform,animation
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网