CSS3 animation动画与js动画的优缺点

本文探讨了CSS3的animation属性用于创建动画的用法,包括animation-name、animation-duration、animation-timing-function等。同时,对比了CSS3动画与JavaScript动画的优缺点,指出CSS3动画在性能和代码简洁性上的优势,以及JavaScript在动画控制和兼容性方面的强项。建议根据项目需求选择合适的动画实现方式。
摘要由CSDN通过智能技术生成

CSS的animation属性

在网页中加入动画是一件很有意思的事情,一般我们可以使用js添加事件来实现动画。但还有一种方法可以实现动画效果,就是使用css 的animation属性。
CSS3中添加的新属性animation是用来为元素实现动画效果的。但是animation无法单独担当起实现动画的效果。这个我们会在后面讲到。我们先来讲讲animation的相关用法。这里我的代码均是采用标准的css3规范书写,大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
以下例子说明
我们的animation 与div 是结合起来使用的,这样的一个代码也是非常简单的。

`div {
    animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}`

animation-name<

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值