【H2O2|全栈】关于CSS（10）CSS3扩充了哪些新鲜的东西？（三）

最新推荐文章于 2024-09-30 20:20:23 发布

过期的H2O2

最新推荐文章于 2024-09-30 20:20:23 发布

阅读量694

点赞数 8

分类专栏：【H2O2】CSS入门文章标签： css css3 前端

本文链接：https://blog.csdn.net/ZC13786305863/article/details/142648584

版权

【H2O2】CSS入门专栏收录该内容

10 篇文章 0 订阅

订阅专栏

transition-timing-function

animation-timing-function

animation-delay

animation-iteration-count

CSS3入门

前言

本系列博客主要介绍CSS有关知识点，当前章节讲述CSS3相关内容。

本期主要内容为：

CSS3过渡属性
CSS3帧动画

部分内容仅代表个人观点，仅供参考，希望能帮助到您。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

过渡属性

在CSS3以前，元素之间的样式过渡（从一个样式过渡到另一个样式）只能使用js实现。而现在，利用新增的transition属性就可以完成一些过渡的效果。

该属性按顺序依次简写下面几个属性值（部分）：

transition-property transition-duration transition-timing-function transition-delay

transition-property

用于设置需要设置过渡的属性，填写all则对应所有属性。

transition-duration

用于设置过渡需要的时间，默认0s。

transition-timing-function

用于设置过渡效果的时间曲线，常见的曲线如下：

时间曲线名	效果
linear	规定以相同速度开始至结束的过渡效果。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in	规定以慢速开始的过渡效果。
ease-out	规定以慢速结束的过渡效果。
ease-in-out	规定以慢速开始和结束的过渡效果。

transition-delay

用于设置延迟开始的时间，默认为0s。

帧动画

CSS3通过创建帧动画，取代网页中的动图，flash动画以及js实现的部分效果。

@keyframes

帧动画的CSS代码如下：

@keyframes name{
    0% {}

    n% {}

    100% {}

}

其中name为帧动画的名称，n为0~100之间的值。

通过设置帧动画时间和n%，可以设置元素在某一时刻（帧）的效果。

animation

该属性用于调用动画。该属性依次调用以下属性：

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

animation-name

用于设置帧动画的名称，对应之前@keyframe中的动画名称，可以设置为none表示没有动画。

animation-duration

用于设置动画持续的时间，单位为s或者ms，类似transition。

animation-timing-function

规定动画的速度曲线，类似transition。

animation-delay

用于设置动画延迟开始的时间。

animation-iteration-count

用于设置动画播放的次数，默认为1。可以设置infinite以无限播放。

animation-direction

用于设置动画是否在下一周期逆向地播放。默认值为normal，可以设置reserve以在结束之后反向播放。

animation-fill-mode

用于设置当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

该属性的值如下：

none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。