动画过渡transition

动画过渡 transition

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

Transition-property:指定过渡或动态模拟的CSS属性：

Transition-duration:指定过渡完成所需的时间；

Transition-timing-function:指定过渡函数；

Transition-delay:指定开始出现的延迟时间；

（1）transition-property

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

特别提醒：当transition-property属性设置为all时,意味着所有初始状态都被设置了.

样式的属性；

（2）transition-duration

该属性主要负责定义从一个属性转换至另一个属性所需的时间长度；其值等于持续时间。

（3）transition-timing-funtion

即“缓冲函数”，指过渡效果的时间曲线，包括以下几种：

（4）transition-delay

设置一个动画开始执行的是时间：

Transitions: property duration timing function delay;

Keyframes & animation

1.keyframes(关键帧)

计算机动画术语中存在"帧"这一关键概念—它代表动画中最小单元的静态图像片段，在视觉效果构建过程中扮演基础角色

上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。

在二维动画制作中，关键帧类似于原画的概念。它代表角色或物体在运动或变化过程中所处的关键动作阶段的特定画面。这些关键帧与前后的其他画面之间通过自动化的插值过程相连并填充过渡效果，在视觉上呈现出连贯的变化效果。此概念类似于Flash等多媒体软件中使用的分层动画机制，在CSS3标准中，默认的动画定义通常以@keyframes关键词开头，并紧跟具体的动画名称和配套的样式说明位于花括号内{…}内。

关键帧的创建：

可在此范围内创建多个百分比，并为每个百分比中的元素分别设置独特的样式。

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

2、animation 动画

Animation为复合样式，包含以下子属性：

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

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

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

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

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

两个值：

Infinite(无限)；n(具体次数)

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

两个值：

Normal 每次循环都是向前播放；

Alternate 奇数次向前播放，偶数次反方向播放；

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

两个值：running & paused

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

Running会从暂停的位置重新启动 animation 播放。
如果是已经停止了 animation 的 playback，则 Running 会切换回从该位置继续播放。
在这种情况下（即当前已停止了 animation 的 playback），element 的状态会被重置为初始设置。

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

四个值：

None:默认，动画按预期进行，在动画完成最后一帧时，会反转到初始帧；

Forwards:动画结束后应用最后的关键帧；

Backwards:使用元素快速设置动画起始帧,其核心体现于初始化阶段；

Both方面都实现了forward和backward的效果，在启动之前会应用初始帧，在结束之后会持续使用最终的关键帧。

@keyframes changecolor{

0%{

background: red;

}

50%{

background: red;

}

100%{

background: green;

}

}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，

如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有

动画效果的元素加上不同的样式，

从而达到一种在不断变化的效果。

这是我掌握的JavaScript运算符与表达式的相关知识，并希望通过分享的方式将这些内容传递给你们，在此希望能够助力于你们的学习进程。

这是我整理的经验心得分享，请各位不吝赐教！如有更好的思路或有任何疑问欢迎在评论区讨论。