动画、动画过渡transition

最新推荐文章于 2023-06-14 09:06:59 发布

ybyfu

最新推荐文章于 2023-06-14 09:06:59 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/ybyfu/article/details/119506250

版权

keyframes(关键帧) 计算机动画术语，帧--就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。其类似于 Flash 中的关键帧。在 CSS3 中其主要以“@keyframes” 开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

关键帧的创建：

0%和 100%之间可以创建多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式；

0%和 100%可以使用关键词 from 和 to 来表示。

2、animation 动画 animation 为复合样式，包含以下子属性：

1) animation:animation-name;(调用动画)

2) animation-duration (动画播放时间)

3) animation-timing-function (动画播放方式)，同 tranition 动画过渡；

4) animation-delay (动画开始播放时间)

5) animation-iteration-count （动画播放次数）

两个值： infinite(无限)；n(具体次数)

6) animation-direction (动画播放方向)

两个值： normal 每次循环都是向前播放； alternate 奇数次向前播放，偶数次反方向播放；

7) animation-play-state （动画播放状态）

两个值：running & paused

running 类似于音乐播放器，paused 是将播放的动画停下来；

running 将暂停的动画重新播放，是从暂停位置开始播放，另外如果暂停了动画的播放，元素的样式将回到最原始设置的状态。

8) animation-fill-mode （动画时间外属性）

四个值： none：默认，动画按预期进行，在动画完成最后一帧时，会反转到初始帧；

forwards：动画结束后应用最后的关键帧；

backwards：元素应用动画样式是迅速应用动画的初始帧，主要体现在动画开始之前；

both：同时具有 forwards 和 backwards 的效果，即开始前会应用初始帧，结束后会继续应用最后的关键帧；

动画过渡:

transition 是一个复合属性，包含一下几个子属性：

<1: transition-property：指定过渡或动态模拟的 CSS 属性；

<2: transition-duration：指定过渡完成所需的时间；

<3: transition-timing-function：指定过渡函数；

<4: transition-delay：指定开始出现的延迟时间；

具有过渡动画的css属性有：

注意：当”transition-property”的属性值为 all 时，表示的是所有初始状态设置了样式的属性；

(2): transition-duration

——该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间；

（3）transition-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)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。