学习
实践
活动
专区
工具
TVP
写文章

了解基本CSS3动画属性值,必须小心避免滥用

我们可以在不使用JavaScript的情况下创建效果和动画,这将有助于许多设计师的工作。但我们必须小心避免滥用CSS3,因为旧浏览器不支持其所有属性。

基本了解CSS,特别是CSS3过渡和关键帧动画,非常重要。使用这个简单的概念,我们将看到如何制作功能图像滑块。

CSS3过渡的基本概念

我们可以使用四个过渡属性:

transition-property 定义应应用转换的CSS属性的名称。

transition-duration 定义转换应发生的持续时间。

transition-timing-function 确定如何计算转换的中间值。定时功能的效果通常称为缓动功能。

transition-delay 定义转换何时开始。

目前,Safari ,Chrome,Firefox ,Opera 和IE 的最新版都支持CSS3过渡。由于该技术仍然相对较新,因此需要浏览器的前缀。到目前为止,每个浏览器的语法完全相同,只需要更改前缀。

让我们看看如何将简单的过渡应用于链接:

动画属性有八个子属性:

animation-delay 定义动画开始的时间。

animation-direction 将动画设置为在备用循环中反向播放。

animation-duration 定义动画完成一个循环所需的时间长度。

animation-iteration-count 定义动画循环在停止之前应播放的次数。

animation-name 指定

@keyframes 规则的名称。

animation-play-state 确定动画是在运行还是暂停。

animation-timing-function 描述动画在一个周期内的进展情况。

animation-fill-mode 指定CSS动画在执行之前和之后应如何将样式应用于其目标。

让我们看看如何将简单的动画应用于div:

每个关键帧描述动画元素应如何在动画序列中的给定点处呈现。该关键帧取一个百分比值来指定时间:0%是动画的开始,同时100%是结束,可以选择为中间动画添加关键帧。

CSS3在动画具有很大的潜力,但它确实有各种浏览器限制,所以有时候JavaScript更可取。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181210A1M6RE00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券