动画 animation 关键帧的总结（下）

最新推荐文章于 2023-06-07 01:00:12 发布

一拳打俩个

最新推荐文章于 2023-06-07 01:00:12 发布

阅读量447

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/weixin_57726733/article/details/116371860

版权

动画 animation 关键帧的总结（下）

04 animation-timing-function设置动画播放方式

animation-timing-function属性主要用来设置动画播放方式。

主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。

ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。

linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。

ease-in:动画开始的速度较慢，然后速度加快。

ease-out:动画开始的速度很快，然后速度减慢。

ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.

设置基础样式如下：


<body>
    <div><i></i></div>
</body>

div{
	width:500px;
	height:200px;
	border:3px solid green;
	margin:100px auto;
}
div i{
	display:inline-block;
	width:20px;
	height:20px;
	background:green;
	border-radius:15px 35px 0;
	animation-name:h2;
	animation-duration:10s;
	animation-timing-function:ease-in;
}

通过不同的百分比切换不同的transform 如下：

@keyframes h2 {
  0%{
    transform: translate(0);
  }
  15%{
    transform: translate(100px,180px);
  }
  30%{
    transform: translate(150px,0);
  }
  45%{
    transform: translate(250px,180px);
  }
  60%{
    transform:translate(300px,0);
  }
  75%{
    transform: translate(450px,180px);
  }
  100%{
    transfrom: translate(480px,0);
  }
}

效果呈现：

05 animation-iteration-count动画的播放次数

animation-iteration-count属性主要用来定义动画的播放次数。

1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，

这意味着动画将从开始到结束只播放一次。

2、如果取值为infinite，动画将会无限次的播放。

06设置动画播放的方向

animation-direction属性：主要用来设置动画播放方向.

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放

例如：通过animation-direction属性，

将move动画播放动画方向设置为alternate，代码为：

animation-direction:alternate;

07 animation-play-state设置动画的播放状态

animation-play-state属性：主要用来控制元素动画的播放状态。

参数：

其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，

可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

设置基础样式如下：

<body>
    <div><span></span></div>
</body>

div {
  width: 300px;
  height: 100px;
  border: 3px solid pink;
  margin: 50px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: green;
  animation:move 3s ease-in .2s infinite alternate;
}
div span:hover{
	animation-play-state:paused;
}

通过不同的百分比切换不同的transform 如下：

@keyframes move {
  0%{
    transform: translate(90px);
  }
  100%{
    transform: translate(90px,90px);
  }
}

效果呈现：（当鼠标移到绿盒子时paused生效，正在播放的动画停下来）

08设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。

主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

forwards:表示动画在结束后继续应用最后的关键帧的位置

backwards:会在向元素应用动画样式时迅速应用动画的初始帧

both:元素动画同时具有forwards和backwards效果

一拳打俩个

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画 animation 关键帧的总结（下）

04 animation-timing-function设置动画播放方式animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。ease-in:动画开始的速度较慢，然后速度加快。ease-out:动画开始的速度很快，然后速度减慢。e...
复制链接

扫一扫