文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何在css3中使用animation属性

2023-06-08 05:31

关注

这篇文章给大家介绍如何在css3中使用animation属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画

animation-name属性为动画指定一个名称

animation-name兼容主流的浏览器,不过还是需要加前缀去兼容

animation-name有两个属性值,分别是keyframename和none

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>    body{        margin:0 auto;            background:#abcdef;        }    div{            width:800px;        height:800px;        margin:0 auto;        }    .container{        position: relative;    }    .inner, .middle, .outer, .pic{        position: absolute;        top:0;        right:0;        bottom:0;        left:0;        margin:auto;            }    .inner{        background:url(source/circle_inner.jpg) center no-repeat;        animation-name:circle_inner;    }    .middle{        background:url(source/circle_middle.jpg) center no-repeat;        animation-name:circle_middle;    }    .outer{        background:url(source/circle_outer.jpg) center no-repeat;        animation-name:circle_outer;    }    .pic{        background:url(source/pic.jpg) center no-repeat;    }</style></head><body>    <div class="container">        <div class="inner"></div>        <div class="middle"></div>        <div class="outer"></div>        <div class="pic"></div>    </div></body></html>

animation-duration 动画持续时间 默认是0

animation-timing-function 动画时间函数

animation-delay 动画延迟时间

animation-delay 属性定义动画什么时候开始,单位可以是秒(s)或毫秒(ms),允许负值,-2s使动画马上开始,但会跳过2s进入动画

animation-iteration-count 动画循环次数

animation-iteration-count: number | infinite 默认为1

animation-direction: normal | reverse | alternate | alternate-reverse 正常; 反向; 正反交替; 反正交替

alternate 和 alternate-reverse ,如果animation-itreation-count 不是设置成 infinite ,则只会执行一次就停止

animation-fill-mode 动画延迟未执行时,或者动画执行完毕后的停留状态(动画不能设置为循环,否则无法停止)

animation-fill-mode: none | forwards | backwards | both 无 结束状态 开始状态 看情况

animation-play-state: running | paused 动画运行状态:运行 | 暂停

animation 简写

animation: name duration timing-function delay iteration-count direction fill-mode play-state

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>    body{        margin:0 auto;            background:#abcdef;        }    div{            width:800px;        height:800px;        margin:0 auto;        }    .container{        position: relative;        -webkit-transform-style:preserve-3d;           -moz-transform-style:preserve-3d;            -ms-transform-style:preserve-3d;             -o-transform-style:preserve-3d;                transform-style:preserve-3d;    }    .inner, .middle, .outer, .pic{        position: absolute;        top:0;        right:0;        bottom:0;        left:0;        margin:auto;            }    .container:hover div{        -webkit-animation-play-state:paused;           -moz-animation-play-state:paused;            -ms-animation-play-state:paused;             -o-animation-play-state:paused;                animation-play-state:paused;    }    .inner{        background:url(source/circle_inner.jpg) center no-repeat;                    -webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running;           -moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running;            -ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running;             -o-animation:circle_inner 10s ease-in-out 1s infinite alternate running;                animation:circle_inner 10s ease-in-out 1s infinite alternate running;                        }    .middle{        background:url(source/circle_middle.jpg) center no-repeat;        -webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running;           -moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running;            -ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running;             -o-animation:circle_middle 10s ease-in-out 1s infinite alternate running;                animation:circle_middle 10s ease-in-out 1s infinite alternate running;        }    .outer{        background:url(source/circle_outer.jpg) center no-repeat;        -webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running;           -moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running;            -ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running;             -o-animation:circle_outer 10s ease-in-out 1s infinite alternate running;                animation:circle_outer 10s ease-in-out 1s infinite alternate running;        }    .pic{        background:url(source/pic.jpg) center no-repeat;    }    @keyframes circle_inner{        0%{ transform:rotateX(0deg); }        50%{ transform:rotateX(90deg); }        100%{ transform:rotateX(360deg); }    }    @keyframes circle_middle{        0%{ transform:rotateY(0deg); }        50%{ transform:rotateY(90deg); }        100%{ transform:rotateY(360deg); }    }    @keyframes circle_outer{        0%{ transform:rotateZ(0deg); }        50%{ transform:rotateZ(90deg); }        100%{ transform:rotateZ(360deg); }    }</style></head><body>    <div class="container">        <div class="inner"></div>        <div class="middle"></div>        <div class="outer"></div>        <div class="pic"></div>    </div></body></html>

如何在css3中使用animation属性

动画性能优化:

用position-fixed代替background-attachment

带图片的元素放在伪元素中

will-change

兼容性IE13+ 感觉可以放弃了&hellip;&hellip;

向下提示箭头效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>    body{        margin:0 auto;            background:#abcdef;        }    div{            width:30px;        height:30px;        position: fixed;        left:0;        right:0;        bottom:100px;        margin:0 auto;            cursor:pointer;        -webkit-transform:rotate(90deg);           -moz-transform:rotate(90deg);            -ms-transform:rotate(90deg);             -o-transform:rotate(90deg);                transform:rotate(90deg);        -webkit-animation:upDown 2s ease-in-out infinite;          -moz-animation:upDown 2s ease-in-out infinite;           -ms-animation:upDown 2s ease-in-out infinite;            -o-animation:upDown 2s ease-in-out infinite;               animation:upDown 2s ease-in-out infinite;    }    @-webkit-keyframes upDown{        0%{ bottom:100px; }        50%{ bottom:80px; }        100%{ bottom:100px; }    }    @-moz-keyframes upDown{        0%{ bottom:100px; }        50%{ bottom:80px; }        100%{ bottom:100px; }    }    @-ms-keyframes upDown{        0%{ bottom:100px; }        50%{ bottom:80px; }        100%{ bottom:100px; }    }    @-o-keyframes upDown{        0%{ bottom:100px; }        50%{ bottom:80px; }        100%{ bottom:100px; }    }    @keyframes upDown{        0%{ bottom:100px; }        50%{ bottom:80px; }        100%{ bottom:100px; }    }</style></head><body>    <div>></div></body></html>

关于如何在css3中使用animation属性就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯